What is Cross-Origin Resource Sharing?

Ever hit a mysterious CORS error while fetching data from another website? Let's break down what CORS is and how it works.

For example, say your JavaScript on https://mohammadshehadeh.com tries to fetch data from https://api.another-service.com. Without proper CORS configuration, the browser blocks this request.

Understanding Origin

An origin has three parts:

• Protocol (e.g., http:// or https://)
• Domain name (e.g., mohammadshehadeh.com)
• Port number (e.g., 80 or 443)

Let's look at some examples:

Same Origin Examples

These URLs share the same origin:

1https://mohammadshehadeh.com/about
2https://mohammadshehadeh.com/api/cors

Even these are considered same origin (port 80 is implicit for HTTP):

1http://mohammadshehadeh.com
2http://mohammadshehadeh.com:80

Different Origin Examples

These URLs have different origins:

Different protocols:

1https://mohammadshehadeh.com
2http://mohammadshehadeh.com

Different domains:

1https://mohammadshehadeh.com
2https://api.mohammadshehadeh.com

Different ports:

1https://mohammadshehadeh.com
2https://mohammadshehadeh.com:8080

When Does CORS Apply?

CORS applies to several types of requests:

• fetch() API calls
• XMLHttpRequest requests
• Web Fonts (using @font-face)
• WebGL textures (images or pixel data applied to 3D objects to enhance their appearance)
• Images/video frames drawn to a canvas using drawImage()

Understanding Preflight Requests

Before certain requests, browsers automatically send a "preflight" request using the OPTIONS HTTP method. Think of it as a permission slip that checks if the actual request is allowed.

Key Preflight Headers

Request Headers:

1OPTIONS /api/data HTTP/1.1
2Origin: https://mohammadshehadeh.com/api/cors
3Access-Control-Request-Method: POST
4Access-Control-Request-Headers: Content-Type

Server Response Headers:

1HTTP/1.1 200 OK
2Access-Control-Allow-Origin: https://mohammadshehadeh.com
3Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS
4Access-Control-Allow-Headers: Content-Type, Authorization

Working with Credentials

To include cookies or authentication headers with your requests, you need extra CORS configuration:

1fetch('https://mohammadshehadeh.com/api/cors', {
2  credentials: 'include', // Includes cookies
3});

Required Server Headers:

1Access-Control-Allow-Origin: https://mohammadshehadeh.com
2Access-Control-Allow-Credentials: true

Best Practices

Only allow trusted websites in your CORS config:

1const allowedSites = ['https://trusted-site.com'];
2if (allowedSites.includes(request.origin)) {
3  // Allow the request
4}

References

• MDN Web Docs: CORS
• CORS Specification
• Understanding CORS Headers