Cross Domain Cookies

Set cookies for cross origin requests

Cross site approach

To allow receiving & sending cookies by a CORS request successfully, do the following.

Back-end (server):
Set the HTTP header Access-Control-Allow-Credentials value to true.
Also, make sure the HTTP headers Access-Control-Allow-Origin and Access-Control-Allow-Headers are set and not with a wildcard *.

For more info on setting CORS in express js read the docs here.

Cookie settings:
Cookie settings per Chrome and Firefox update in 2021: SameSite=None and Secure. When doing SameSite=None, setting Secure is a requirement. See docs on SameSite and on requirement of Secure. Also note that Chrome devtools now have improved filtering and highlighting of problems with cookies in the Network tab and Application tab.

Front-end (client): Set the XMLHttpRequest.withCredentials flag to true, this can be achieved in different ways depending on the request-response library used:

jQuery 1.5.1 xhrFields: {withCredentials: true}
ES6 fetch() credentials: 'include'
axios: withCredentials: true

Proxy approach

Avoid having to do cross site (CORS) stuff altogether. You can achieve this with a proxy. Simply send all traffic to the same top level domain name and route using DNS (subdomain) and/or load balancing. With Nginx this is relatively little effort.

This approach is a perfect marriage with JAMStack. JAMStack dictates API and Webapp code to be completely decoupled by design. More and more users block 3rd party cookies. If API and Webapp can easily be served on the same host, the 3rd party problem (cross site / CORS) dissolves. Read about JAMStack here or here.

Sidenote

It turned out that Chrome won't set the cookie if the domain contains a port. Setting it for localhost (without port) is not a problem. Many thanks to Erwin for this tip!

CORS Cookie not set on cross domains, using fetch, set credentials: 'include' and origins have been set

I'm just trying to get a cookie set for my current domain by calling a server on a different domain.

You can't, at least not directly. Cookies belong to the origin that set them.

The closest you could come would be for the different domain to return the data in a non-Cookie format (such as the body of the response), and then to use client-side JS to store it using document.cookie.

Cookies on cross domain requests

You need to set the withCredentials flag for cookies to properly work when making cross-domain requests.

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/withCredentials:

In addition, this flag is also used to indicate when cookies are to be ignored in the response.

Setting cross-domain cookies in Safari

From the Safari Developer FAQ:

Safari ships with a conservative cookie policy which limits cookie writes to only the pages chosen ("navigated to") by the user. This default conservative policy may confuse frame based sites that attempt to write cookies and fail.

I have found no way to get around this.

If it's worth anything, Chrome doesn't set the cookies either if you use the <script> appending method, but if you have a hidden <img> with the same source, Chrome works in addition to the rest of the browsers (except, again, Safari)

Browser blocks cross domain iframe cookies

If this stopped working only very recently, it could be related to the Chrome's recent breaking change , that in case cookie's attribute SameSite is not explicitely set it defaults to SameSite = Lax, which prevents your browser in cross site requests to sent the cookie over.

I checked your https://shop-sandbox.adbuddy.be/discussie/ - there are many cookies with SameSite empty.

There could be a couple of more reasons, why a browser ignores a cookie in the request and I tried to sum all of them in my blog here