title: Send Ajax request with custom cookies to another domain
body: <p>I have a target URL from server , and want to send some parameter with specific cookies to it, via <code>Ajax</code> in <code>Chrome</code> browser.</p>
  
  <p>Response header of server of target URL <strong>(I don't have access to server for any change config or change scripts on it)</strong> :</p>
  
  <pre><code>Cache-Control:max-age=600, private, must-revalidate
  Cache-Control:no-store, no-cache, must-revalidate, post-check=0, pre-check=0
  Connection:keep-alive
  Content-Encoding:gzip
  Content-Length:6821
  Content-Type:text/html
  Date:Thu, 16 Nov 2017 22:50:17 GMT
  Expires:Thu, 19 Nov 1981 08:52:00 GMT
  Pragma:no-cache
  Server:Apache
  Vary:Accept-Encoding
  X-Powered-By:PHP/5.5.38
  </code></pre>
  
  <p>I started for it!<br>
  Firstly I try <code>CURL</code> for test access. This works so there is a need for server access and there is no need to set a specific header:</p>
  
  <pre><code>curl 'http://www.foo.com/bar.php' \
       -H 'Cookie: PHPSESSID=vjjuo34g4gh46ajd471lt8pvn7;' \
       --data 'x=1&amp;y=2' --compressed -s
  </code></pre>
  
  <p>It is only important that the <code>PHPSESSID</code> cookie is sent.</p>
  
  <p><strong>Response: correct, and has access.</strong></p>
  
  <p>See:<br>
  <a href="https://i.stack.imgur.com/DwB0e.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DwB0e.gif" alt="pic01"></a></p>
  
  <p>Now I try Ajax and the Chrome browser locally:</p>
  
  <pre><code>$.ajax({
      type: "POST",
      ContentType: "application/json; charset=UTF-8",
      dataType: "json",
      data: {x : '1', y: '2'},
      url: 'http://www.foo.com/bar.php',
      complete: function(data) {
          console.log('RESPONSE TEXT&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;', data.responseText);
      }
  });
  </code></pre>
  
  <p>I receive the following error message:</p>
  
  <blockquote>
    <p>Failed to load <a href="http://www.foo.com/bar.php" rel="nofollow noreferrer">http://www.foo.com/bar.php</a>: No
    'Access-Control-Allow-Origin' header is present on the requested
    resource. Origin '<a href="http://localhost:8888" rel="nofollow noreferrer">http://localhost:8888</a>' is therefore not allowed
    access.</p>
  </blockquote>
  
  <p>See:<br>
  <a href="https://i.stack.imgur.com/5wfHA.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5wfHA.gif" alt="pic02"></a></p>
  
  <p>I activate the <a href="https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?utm_source=chrome-app-launcher-info-dialog" rel="nofollow noreferrer"><code>Allow-Control-Allow-Origin</code></a> chrome extension and run it again.<br>
  This time it works. But there is no access because the cookie is not sent.</p>
  
  <p><strong>Response: incorrect, and has not access.</strong></p>
  
  <p>See:<br>
  <a href="https://i.stack.imgur.com/aETAE.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/aETAE.gif" alt="pic03"></a>  </p>
  
  <p>Add a cookie to the Ajax request header:</p>
  
  <pre><code>beforeSend : function(xhr) {  
      xhr.setRequestHeader('Cookie', 'PHPSESSID=vjjuo34g4gh46ajd471lt8pvn7;');
  },
  </code></pre>
  
  <p>The cookie is not set and the error appears in the console, Error:</p>
  
  <blockquote>
    <p>Refused to set unsafe header "Cookie"</p>
  </blockquote>
  
  <p><strong>Response: incorrect, and has not access.</strong></p>
  
  <p>See:<br>
  <a href="https://i.stack.imgur.com/3PHIR.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3PHIR.gif" alt="pic04"></a></p>
  
  <p>We add this to the Ajax request to allow us to add a cookie:</p>
  
  <pre><code>xhrFields: {
      withCredentials: true,
  },
  </code></pre>
  
  <p>What happens is that my preferred cookie is not set. But the pre-configured cookies are set to my domain for the requested domain.<br>
  (We assume that these are the same cookies that are not the issue.)<br>
  But this time the following message appears in the console:</p>
  
  <blockquote>
    <p>Failed to load <a href="http://www.foo.com/bar.php" rel="nofollow noreferrer">http://www.foo.com/bar.php</a>: The value of the
    'Access-Control-Allow-Origin' header in the response must not be the
    wildcard '*' when the request's credentials mode is 'include'. Origin
    '<a href="http://localhost:8888" rel="nofollow noreferrer">http://localhost:8888</a>' is therefore not allowed access. The
    credentials mode of requests initiated by the XMLHttpRequest is
    controlled by the withCredentials attribute.</p>
  </blockquote>
  
  <p><strong>Response: correct, but return EMPTY!!! WHY?!</strong></p>
  
  <p>See:<br>
  <a href="https://i.stack.imgur.com/aLnal.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/aLnal.gif" alt="pic06"></a><br>
  <a href="https://i.stack.imgur.com/imkOG.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/imkOG.gif" alt="pic05"></a></p>
  
  <p>You see that the request contained cookies that were required. But the correct response was not received at <code>data.responseText</code> and JavaScript.<br>
  But it is strange that the <code>Developer Tools&gt; Network&gt; Response</code> response text is shown correctly.</p>
  
  <p><strong>Why is this happening and how can I finally get the correct response like <code>CURL</code> request of the first above image?</strong></p>
  
  <p><strong>EDIT:</strong><br>
  Output of <code>console.log(data)</code> command. see here:<br>
  <a href="https://i.stack.imgur.com/hFv3h.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hFv3h.gif" alt="pic07"></a><br>
  Seem the red message was changed in this time! and also seem some time to load response data failed in <code>Response</code> tab of chrome!</p>