What is Cross-Origin Resource Sharing?

Have you ever tried getting data from another website or a third-party service for your webpage? If so, you might have run into CORS errors that stop your webpage from getting the data it needs.

Web browsers have a security feature called CORS, which prevents web pages from making requests to domains, protocols, or ports different from the one that served the page (different origin).

An example of a cross-origin request: the front-end JavaScript code served from https://domain-a.com uses fetch() to make a request for https://domain-b.com/data.json.

Origin#

Origin is defined by the scheme (protocol), hostname (domain), and port of the URL used to access it.

Examples:

The following are same origin because they have the same scheme (http) and hostname (mohammmadshehadeh.com)

• https://mohammmadshehadeh.com/blog/
• https://mohammmadshehadeh.com/about/

Same for these because a server delivers HTTP content through port 80 by default:

• http://mohammmadshehadeh.com:80
• http://mohammmadshehadeh.com

These are not the same origin because they use:

• Different schemes:

  • https://mohammmadshehadeh.com
  • http://mohammmadshehadeh.com

• Different hostnames:

  • https://mohammmadshehadeh.com
  • https://example.mohammmadshehadeh.com

For security purposes, browsers prevent cross-origin HTTP

What requests use CORS?#

CORS is enabled for the following requests:

• fetch() or XMLHttpRequest request.
• cross-domain font usage in @font-face within CSS and more.

Preflighted requests#

A preflight request is a CORS request that checks to see if the CORS protocol is understood and the server is aware of using specific methods and headers. it uses OPTION method, with some HTTP request headers:

• Access-Control-Request-Method
• Access-Control-Request-Headers
• Origin

You can find further details regarding request headers in my blog post understanding-http-headers.

A preflight request is automatically used by the browser.

The server must respond to the preflight request with information about the cross-origin requests. The server response headers must include the following:

• Access-Control-Allow-Methods

  Access-Control-Allow-Methods: GET, POST

• Access-Control-Allow-Headers

  Access-Control-Request-Headers: Content-Type, x-requested-with

• Access-Control-Allow-Origin

  Access-Control-Allow-Origin: https://mohammadshehadeh.com

Share credentials with CORS#

If you want to send cookies or HTTP authorization when using CORS, which can identify the sender, you need to add additional headers to the request and response.

Add credentials: 'include' to the fetch options as in the following example to include the cookie with the request:

fetch('https://mohammadshehadeh.com', {
  credentials: 'include'
})

The server must be set to a specific origin and Access-Control-Allow-Credentials must be set to true.

HTTP/1.1 200 OK
Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Credentials: true

References#

• Cross-Origin Resource Sharing (CORS)