How to Make Cross Domain Request

How to make a cross domain request from javascript

There is no way to read the data using purely client side code.

You need to make the request from a server, and have the client side code fetch the data from that server.

Said server will either be the same origin as the page hosting the JS or it will be one that uses CORS to grant permission to your origin.

Making Cross Domain Ajax Requests

The only true answer is 1. Simply because CORS preflight request fails on 3 and 4, so the actual request never even takes place.

Workaround for Cross Domain Request

CORS (Cross-Origin Resource Sharing) is a system, consisting of transmitting HTTP headers, that determines whether browsers block frontend JavaScript code from accessing responses for cross-origin requests. (https://developer.mozilla.org/en-US/docs/Glossary/CORS)

You cannot inject JavaScript into a window when cross-origin resource sharing is disabled and this is by design.

Possible workarounds:

Change CORS headers on the server of Urltwo
~~Fetch source of Urltwo via an HTTP request and render it in a blank iframe (applicability will vary)~~. Edit: If the request is initiated from JavaScript, this will be subject to CORS as well.

If you have access to the server serving Urltwo, changing CORS settings is the best solution.
If you do not have access to the server, but you can edit the document served at Urltwo, you can communicate between the documents via document.postMessage (https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage) or by encoding information in the URL (query string or hash).
If you have access to neither, you can use a proxy that fetches the contents at Urltwo, sents the correct CORS headers and sends the result back to you.

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) HTTP header settings:

Set the HTTP header Access-Control-Allow-Credentials value to true.
Make sure the HTTP headers Access-Control-Allow-Origin and Access-Control-Allow-Headers are set. Don't use a wildcard *. When you set the allowed origin make sure to use the entire origin including the scheme, i.e. http is not same as https in CORS.

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
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:

ES6 fetch() This is the preferred method for HTTP. Use credentials: 'include'.
jQuery 1.5.1 Mentioned for legacy purposes. Use xhrFields: { withCredentials: true }.
axios As an example of a popular NPM library. Use 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!