Understanding CORS: A Friendly Guide for Front-End Developers

Cross-Origin Resource Sharing

If you've been working on a web project and encountered those pesky "CORS errors" in your browser's console, you’re not alone. CORS, or Cross-Origin Resource Sharing, can seem intimidating at first, but understanding the basics will make troubleshooting and solving these issues much easier. In this article, we’ll break it all down: what CORS is, when it applies, why it exists, and how to work with it effectively.

What is CORS?

CORS stands for Cross-Origin Resource Sharing, a security feature built into web browsers. It controls how resources (like fonts, scripts, or APIs) can be shared between different origins.

What is an Origin?

An origin is defined by three things:

1. Protocol: Is the resource served over HTTP or HTTPS?
2. Domain: The domain name (e.g., example.com).
3. Port: The network port (e.g., 80 for HTTP or 443 for HTTPS).

For example:

• https://example.com and http://example.com are different origins because the protocols are different.
• https://api.example.com and https://example.com are also different origins because the subdomains differ.

CORS becomes relevant whenever a web page makes a request to a different origin.

When Does CORS Apply?

CORS is applied when a browser makes a cross-origin request, which means requesting resources from an origin different from the web page's. For example:

• Your website (https://example.com) loads a font from https://cdn.example.com.
• A JavaScript script fetches data from https://api.example.com.

Examples of Resources That Trigger CORS:

• Fonts (e.g., @font-face in CSS).
• APIs (via fetch or XMLHttpRequest).
• Images when accessing pixel data (e.g., with the <canvas> API).
• Scripts in certain situations.

When Doesn’t CORS Apply?

• Linking to images, stylesheets, or scripts from another origin doesn’t trigger CORS unless you try to access or manipulate them with JavaScript.
• When the request is between the same origin (e.g., https://example.com fetching resources from https://example.com).

Why Do We Need CORS?

CORS is a security measure. It prevents malicious websites from accessing sensitive data on another website without permission. For instance, without CORS, a bad actor could create a script to fetch user data from your API using someone else's logged-in session.

How CORS Works: Headers and Preflight Requests

Headers: The Key to CORS

CORS uses HTTP headers to control access to resources. Here are the most common ones:

• Access-Control-Allow-Origin: Specifies which origins are allowed to access the resource.
  • Example: Access-Control-Allow-Origin: https://example.com allows requests only from https://example.com.
  • A wildcard (*) allows all origins.
• Access-Control-Allow-Methods: Lists allowed HTTP methods (e.g., GET, POST, OPTIONS).
• Access-Control-Allow-Headers: Lists allowed custom headers in the request.
• Access-Control-Expose-Headers: Lets the client read certain response headers (e.g., Content-Length).

Preflight Requests

A preflight request is an automatic OPTIONS request sent by the browser before the actual request. It asks the server if the cross-origin request is allowed.

Preflight requests are triggered when:

1. The HTTP method is not GET, POST, or HEAD.
2. Custom headers (e.g., Authorization) are included.
3. The request's Content-Type is not one of:
   • application/x-www-form-urlencoded
   • multipart/form-data
   • text/plain.

Example: Preflight Request

1. The browser sends an OPTIONS request to the server: OPTIONS /api/resource HTTP/1.1 Origin: https://example.com Access-Control-Request-Method: POST Access-Control-Request-Headers: Authorization
2. The server responds with CORS headers: HTTP/1.1 200 OK Access-Control-Allow-Origin: https://example.com Access-Control-Allow-Methods: POST Access-Control-Allow-Headers: Authorization
3. If the response is valid, the browser proceeds with the actual request.

Setting Up a Server for CORS

Example 1: Allowing All Origins

On a Node.js server using Express:

const express = require('express');
const cors = require('cors');
const app = express();

app.use(cors()); // Allow all origins

app.get('/api/data', (req, res) => {
    res.json({ message: 'Hello, world!' });
});

app.listen(3000, () => console.log('Server running on port 3000'));

This sends Access-Control-Allow-Origin: * with every response.

Example 2: Restricting Origins

You can restrict access to specific origins:

const corsOptions = {
    origin: 'https://example.com', // Only allow this origin
    methods: ['GET', 'POST'], // Allow only GET and POST
    allowedHeaders: ['Content-Type', 'Authorization'], // Allow custom headers
};

app.use(cors(corsOptions));

Example 3: Handling Preflight Requests

If you need custom handling for preflight requests:

app.options('/api/data', cors(corsOptions)); // Handle preflight requests

CORS with a CDN

To allow CORS for resources served via a Content Delivery Network (CDN), ensure the CDN is configured to include the appropriate headers.

Example: Allowing Cross-Origin Fonts on CloudFront

1. Configure the response headers in CloudFront:
   • Add Access-Control-Allow-Origin: * to the response headers.
   • Allow the OPTIONS HTTP method in the cache behavior.
2. Update your S3 bucket's CORS policy: [ { "AllowedHeaders": ["*"], "AllowedMethods": ["GET", "HEAD", "OPTIONS"], "AllowedOrigins": ["*"], "ExposeHeaders": ["ETag"], "MaxAgeSeconds": 3000 } ]

Debugging CORS Issues

1. Use Browser DevTools: Check the network tab for failed requests and examine the CORS headers.
2. Look for Missing Headers: Ensure your server or CDN includes the required CORS headers.
3. Check Preflight Responses: Make sure preflight requests are responded to with the correct headers.

Wrapping Up

CORS is a powerful browser security feature that ensures only authorized origins can access your resources. By understanding origins, headers, and preflight requests, you can confidently handle CORS in your applications.

With the right server or CDN setup, you can safely share your resources across origins and resolve those frustrating CORS errors. Now, you’re ready to dive into your next project with a solid understanding of how CORS works!