@atomkirk's answer didn't apply to me because
- I don't use the
fetch
API
- I was making cross-site requests (i.e. CORS)
NOTE: If your server is using Access-Control-Allow-Origin:*
(aka "all origins"/"wildcard origins"), you may not be able to send credentials (see below).
Setting withCredentials
/credentials
in browser/client request
As for the fetch
API; CORS requests will need {credentials:'include'}
for both sending & receiving cookies
For CORS requests, use the "include" value to allow sending
credentials to other domains:
fetch('https://example.com:1234/users', {
credentials: 'include'
})
... To opt into accepting cookies from the server, you must use the credentials option.
{credentials:'include'}
is equivalent to xhr.withCredentials=true
In fact, checkfetch
polyfill code (a Javascript implementation)
if (request.credentials === 'include') {
xhr.withCredentials = true
}
As @haneSmitter says in the comments, if fetch
is implemented natively by your browser, you don't need a Javascript polyfill, so use the appropriate value for fetch credentials
property. fetch
allows three values for { credentials:'...' } configuration ( "omit", "same-origin", or "include"), whereas xhr is only a boolean (two values: true or false). Read more at the fetch spec here
If you're using jQuery, you can set withCredentials (remember to use crossDomain: true
) using $.ajaxSetup(...)
$.ajaxSetup({
crossDomain: true,
xhrFields: {
withCredentials: true
}
});
If you're using AngularJS, the $http
service config arg accepts a withCredentials
property:
$http({
withCredentials: true
});
If you're using Angular (Angular IO), the common.http.HttpRequest
service options arg accepts a withCredentials
property:
this.http.post<Hero>(this.heroesUrl, hero, {
withCredentials: true
});
As for the request, when xhr.withCredentials=true
; the Cookie header is sent
Before I changed xhr.withCredentials=true
- I could see Set-Cookie name & value in the response, but Chrome's "Application" tab in the Developer Tools showed me the name and an empty value
- Subsequent requests did not send a
Cookie
request header.
After the change xhr.withCredentials=true
- I could see the cookie's name and the cookie's value in the Chrome's "Application" tab (a value consistent with the Set-Cookie header).
- Subsequent requests did send a
Cookie
request header with the same value, so my server treated me as "authenticated"
Setting Access-Control...
headers in server response
As for the response, if your request is a cross-site request, the server will need certain Access-Control...
headers
For example, I configured my server to return these headers:
- Access-Control-Allow-Credentials:true
- Access-Control-Allow-Origin:https://{your-origin}:{your-port}
Until I made this server-side change to the response headers, Chrome logged errors in the console like
Failed to load https://{saml-domain}/saml-authn
: Redirect from https://{saml-domain}/saml-redirect
has been blocked by CORS policy:
The value of the 'Access-Control-Allow-Credentials'
header in the response is ''
which must be 'true'
when the request's credentials mode is 'include'
. Origin https://{your-domain}
is therefore not allowed access.
The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.
After making this Access-* header change, Chrome did not log errors; the browser let me check the authenticated responses for all subsequent requests.
Can't use wildcard/asterisk Access-Control-Allow-Origin:*
, use dynamic value based on request
Using withCredentials
and setting Access-Control-Allow-Origin:*
(aka wildcard, allowing "all origins") won't work. As seen in the comments and described here (thanks to @ChandanBhattad). You might see this error:
The CORS request was attempted with the credentials flag set, but the server is configured using the wildcard ("*") as the value of Access-Control-Allow-Origin, which doesn't allow the use of credentials.
Therefore if you control the server and you want to allow cross-origin requests from any origin, you must dynamically decide the response value based on the request origin, or as MDN says:
If the server supports clients from multiple origins, it must return the origin for the specific client making the request.
For example, your server should inspect the request, if the request comes from http://www.example.com
, your response headers should include:
Access-Control-Allow-Origin: http://www.example.com
Vary: Origin
Note the use of the Vary
response header, which MDN says:
indicates to browsers that server responses can differ based on the value of the Origin request header.
How to change your server response headers depends on your server technology.
DNT: 1
in the header. If I recall, this is Do Not Track and the browsers is requesting to not allow cookies to be set.