Send Ajax request with custom cookies to another domain

Question

I have a target URL from server , and want to send some parameter with specific cookies to it, via Ajax in Chrome browser.

Response header of server of target URL (I don't have access to server for any change config or change scripts on it) :

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

I started for it!
Firstly I try CURL for test access. This works so there is a need for server access and there is no need to set a specific header:

curl 'http://www.foo.com/bar.php' \
     -H 'Cookie: PHPSESSID=vjjuo34g4gh46ajd471lt8pvn7;' \
     --data 'x=1&y=2' --compressed -s

It is only important that the PHPSESSID cookie is sent.

Response: correct, and has access.

See:

Now I try Ajax and the Chrome browser locally:

$.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>>>>>>>>', data.responseText);
    }
});

I receive the following error message:

Failed to load http://www.foo.com/bar.php: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8888' is therefore not allowed access.

See:

I activate the Allow-Control-Allow-Origin chrome extension and run it again.
This time it works. But there is no access because the cookie is not sent.

Response: incorrect, and has not access.

See:

Add a cookie to the Ajax request header:

beforeSend : function(xhr) {  
    xhr.setRequestHeader('Cookie', 'PHPSESSID=vjjuo34g4gh46ajd471lt8pvn7;');
},

The cookie is not set and the error appears in the console, Error:

Refused to set unsafe header "Cookie"

Response: incorrect, and has not access.

See:

We add this to the Ajax request to allow us to add a cookie:

xhrFields: {
    withCredentials: true,
},

What happens is that my preferred cookie is not set. But the pre-configured cookies are set to my domain for the requested domain.
(We assume that these are the same cookies that are not the issue.)
But this time the following message appears in the console:

Failed to load http://www.foo.com/bar.php: 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 'http://localhost:8888' is therefore not allowed access. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

Response: correct, but return EMPTY!!! WHY?!

See:

You see that the request contained cookies that were required. But the correct response was not received at data.responseText and JavaScript.
But it is strange that the Developer Tools> Network> Response response text is shown correctly.

Why is this happening and how can I finally get the correct response like CURL request of the first above image?

EDIT:
Output of console.log(data) command. see here:

Seem the red message was changed in this time! and also seem some time to load response data failed in Response tab of chrome!

`dataType: "json"` makes ajax auto parse the json response into an object. console.log(data) and see what you have. — Taplar, Nov 16 '17 at 22:07
bypassing `CORS` is much harder than properly enabling CORS in your **server** — Jaromanda X, Nov 16 '17 at 22:17
Good resource for enabling cors in php https://stackoverflow.com/a/9866124/1175966 — charlietfl, Nov 16 '17 at 22:33
@JaromandaX, I know, but I could not access to server! And so I don't have problem with any extension on chrome if needed, because I just want to run it local for test. — Nabi K.A.Z., Nov 16 '17 at 22:39
Here's the ONLY option for bypassing CORS ... proxy the request via YOUR server - that way, there is no CORS issues at all - the problem with using browser options to bypass CORS is that they leave you vulnerable - learn how to proxy your requests, do it right, do it safely :p — Jaromanda X, Nov 16 '17 at 22:44
@JaromandaX Do you mean something like this? : https://stackoverflow.com/a/42274632/1407491 — Nabi K.A.Z., Nov 16 '17 at 23:19
@JaromandaX I talk about second answer in that links, The solution you provided there, Did it mean something like that? — Nabi K.A.Z., Nov 16 '17 at 23:23
If response text is shown correctly, have you tried using the un-minified version of JQuery, and then inspecting what the actual response text is in the wrapped XHR object? Maybe this is just JQuery missing something when it takes the browser XHR object's response and tries to expose it via its wrapper object? — Shane, Jul 05 '18 at 03:34

score 1 · Answer 1 · answered Nov 16 '17 at 22:44

Header Access-Control-Allow-Origin is set in the server. For receiving a reponse from the server using AJAX you need to add a value to Access-Control-Allow-Origin header that doesn't be the a wildcard *.

I can see you are making a test from your localhost. If you set Access-Control-Allow-Origin: http://localhost/ it won't work. If you can test from your server it may work.

What you can do is a test from a site where you have a domain, and add Access-Control-Allow-Origin: domain to the response.

If you need more information about this topic I recommend you this site:

https://developer.mozilla.org/es/docs/Web/HTTP/Access_control_CORS

I don't have access to server for any change config or change scripts on it, and also I add sample response header of server in first of my question post. And also welcome to the stackoverflow and for first answer :-D — Nabi K.A.Z., Nov 16 '17 at 22:56

Send Ajax request with custom cookies to another domain

1 Answers1