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

Question

I'm using fetch to do a request to the backend. The cookie ISN'T set when I use a different domain. The cookie IS set when I use the same domain.

Why is it not being set?

I modified my /etc/hosts file to use pseudonymns to test using the same and different domain, and made sure they are not blacklisted by the browser either.

If I use local-test-frontend.com for both the browser and server domain it works, but if I change the backend url to local-test-backend.com it fails.

*Note that my front end url I test it from is * http://local-test-frontend.com:3000/login

Javascript

    fetch('http://local-test-backend.com/login',  {
        mode: 'cors',
        method: 'POST',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
        },
        body: JSON.stringify(loginRequest),
        credentials: 'include'
    }).then(// Other code here.....

Server Response Headers

Access-Control-Allow-Credentials    
true
Access-Control-Allow-Origin 
http://local-test-frontend.com:3000
Content-Length  
103
Content-Type    
application/json
Date    
Wed, 10 Jul 2019 07:23:49 GMT
Server  
Werkzeug/0.15.1 Python/3.7.3
Set-Cookie  
MY_TOKEN=a7b8ad50f19…end.com; Path=/; SameSite=Lax

Answer 1

As of 2021 with Edge 90.0.796.0 on Linux, I managed to set CORS cookie with the following approach:

1. Client initializes asynchronously a fetch request with credentials: 'include'. See here for more details.
2. To do CORS, server response header must contain Access-Control-Allow-Origin explicitly set to a domain, could be different from the server domain. For example, in a Single-Page-App architecture, your frontend site is temporarily hosted at localhost:3000 and your backend server hosted at localhost:8000, then the header should be Access-Control-Allow-Origin: http://localhost:3000. See here and here.
3. To allow client to process cookies, which is obviously a sensitive resource, server response header must further contain Access-Control-Allow-Credentials: true. See here. Note that this enforces a non-wildcard setting for Access-Control-Allow-Origin. See here - that's why in point 2 above, it has to be explicitly set to something like http://localhost:3000 rather than *
4. When server sets the cookie, it has to include SameSite=None; Secure; HttpOnly. So overall something like Set-Cookie: session_id=12345; SameSite=None; Secure; HttpOnly. SameSite seems to be a relatively new requirement in latest browsers, and must be used with Secure together when SameSite is set to None.
5. With regard to HttpOnly, I haven't found relevant materials, but in my experiment, omitting it caused the browser to ignore the Set-Cookie header.
6. Further requests to the backend server also must have credentials: 'include' set.