Seems that something similar already has been discussed on stackoverflow, but i could not find exactly the same.
I am trying to send Cookie with CORS(Cross-origin resource sharing), but it is not working.
This is my code.
$.ajax(
{
type: "POST",
url: "http://example.com/api/getlist.json",
dataType: 'json',
xhrFields: {
withCredentials: true
},
crossDomain: true,
beforeSend: function(xhr) {
xhr.setRequestHeader("Cookie", "session=xxxyyyzzz");
},
success: function(){
alert('success');
},
error: function (xhr) {
alert(xhr.responseText);
}
}
);
I dont see this cookie in request HEADER.
You cannot set or read cookies on CORS requests through JavaScript. Although CORS allows cross-origin requests, the cookies are still subject to the browser's same-origin policy, which means only pages from the same origin can read/write the cookie. withCredentials
only means that any cookies set by the remote host are sent to that remote host. You will have to set the cookie from the remote server by using the Set-Cookie
header.
Please note this doesn't solve the cookie sharing process, as in general this is bad practice.
You need to be using JSONP as your type:
From $.ajax documentation: Cross-domain requests and dataType: "jsonp" requests do not support synchronous operation.
$.ajax(
{
type: "POST",
url: "http://example.com/api/getlist.json",
dataType: 'jsonp',
xhrFields: {
withCredentials: true
},
crossDomain: true,
beforeSend: function(xhr) {
xhr.setRequestHeader("Cookie", "session=xxxyyyzzz");
},
success: function(){
alert('success');
},
error: function (xhr) {
alert(xhr.responseText);
}
}
);
There have been a slew of recent changes in this arena, so I thought a fresh answer would be helpful.
To have a cookie sent by the browser to another site during a request the following criteria must be met:
Set-Cookie
header from the target site must contain the SameSite=None
and Secure
labels. If Secure
is not used the SameSite
header will be ignored.https
endpoint, a requirement of the Secure
flag.XHRRequest
must be made with withCredentials=true
. If using $.ajax()
this is accomplished with the xhrFields
parameter (requiring jQuery=1.5.1+
)Access-Control-Allow-Origin
header that matches the request Origin
header. (*
will not be respected in this case)A lot of people find their way to this post trying to do local development against a remote endpoint, which is possible if the above criteria are met.
I had this same problem. The session ID is sent in a cookie, but since the request is cross-domain, the browser's security settings will block the cookie from being sent.
Solution: Generate the session ID on the client (in the browser), use Javascript sessionStorage to store the session ID then send the session ID with each request to the server.
I struggled a lot with this issue, and there weren't many good answers around. Here's an article detailing the solution: Javascript Cross-Domain Request With Session
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With