What is CORS?

Introduction

CORS (Cross-Origin Resource Sharing) is a browser security feature that controls how web pages in one domain (origin) can request resources from another domain. It's a mechanism that allows servers to specify which external websites are permitted to access their resources, providing a secure way to enable legitimate cross-domain requests while maintaining web security.

An "origin" in web terms is defined by the combination of protocol, domain, and port. For example, https://example.com:443 and https://api.example.com:443 are different origins, even though they share the same root domain.

The Same-Origin Policy

To understand CORS, you must first understand the browser's default Same-Origin Policy. This policy is a critical security measure that blocks scripts running on one web page from making requests to a different origin without explicit permission.

Why the Same-Origin Policy Exists

Imagine you're logged into your online banking account at bank.com. Without the Same-Origin Policy, a malicious website you visit could potentially:

1. Make JavaScript requests to bank.com
2. Access your banking data because your browser would automatically include your authentication cookies
3. Steal sensitive information or perform unauthorized transactions

The Same-Origin Policy prevents this by blocking any cross-origin requests unless explicitly allowed. This means:

• https://mysite.com cannot access resources from https://api.example.com
• https://app.example.com cannot access https://api.example.com (different subdomains)
• http://example.com cannot access https://example.com (different protocols)

How CORS Works

CORS is a mechanism that allows servers to explicitly relax the Same-Origin Policy in a controlled manner. It works through HTTP headers that communicate permissions between the browser and server.

Simple CORS Requests

For simple requests (like basic GET requests), the browser includes an Origin header:

GET /api/data HTTP/1.1
Host: api.example.com
Origin: https://myapp.com

The server can respond with an Access-Control-Allow-Origin header to grant permission:

HTTP/1.1 200 OK
Access-Control-Allow-Origin: https://myapp.com
Content-Type: application/json

{"data": "response content"}

If the server wants to allow requests from any origin, it can use:

Access-Control-Allow-Origin: *

CORS Headers

Key CORS headers include:

• Access-Control-Allow-Origin: Specifies which origins are allowed
• Access-Control-Allow-Methods: Lists allowed HTTP methods (GET, POST, etc.)
• Access-Control-Allow-Headers: Specifies which headers can be used in requests
• Access-Control-Allow-Credentials: Indicates whether cookies can be included
• Access-Control-Max-Age: How long browsers can cache CORS information

Pre-flight Requests

For more complex requests (called "non-simple requests"), browsers first send a pre-flight request using the OPTIONS method to check if the actual request is allowed.

What Triggers a Pre-flight Request

Pre-flight requests are required for:

• HTTP methods other than GET, HEAD, or POST
• POST requests with certain content types (like application/json)
• Requests with custom headers

Pre-flight Example

Pre-flight Request:

OPTIONS /api/users HTTP/1.1
Host: api.example.com
Origin: https://myapp.com
Access-Control-Request-Method: PUT
Access-Control-Request-Headers: Content-Type, Authorization

Pre-flight Response:

HTTP/1.1 200 OK
Access-Control-Allow-Origin: https://myapp.com
Access-Control-Allow-Methods: GET, POST, PUT, DELETE
Access-Control-Allow-Headers: Content-Type, Authorization
Access-Control-Max-Age: 86400

Only after receiving this successful pre-flight response will the browser send the actual request.

Common CORS Issues

Wildcard Restrictions

When using credentials (cookies), you cannot use Access-Control-Allow-Origin: *. You must specify exact origins:

// This won't work with credentials
Access-Control-Allow-Origin: *
Access-Control-Allow-Credentials: true

// This will work
Access-Control-Allow-Origin: https://myapp.com
Access-Control-Allow-Credentials: true

Missing CORS Headers

If a server doesn't include appropriate CORS headers, browsers will block the request and show console errors like:

Access to XMLHttpRequest at 'https://api.example.com/data' from origin 'https://myapp.com' 
has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the 
requested resource.

Conclusion

CORS is a vital security standard that enables legitimate cross-origin API requests while protecting users from malicious websites. It provides a secure middle ground between the restrictive Same-Origin Policy and completely open access.

Understanding CORS is essential for modern web development, especially when building single-page applications that consume APIs, integrating third-party services, or creating microservices architectures. While CORS errors can be frustrating during development, they're protecting users from serious security vulnerabilities.

When implementing CORS, always follow the principle of least privilege - only allow the origins, methods, and headers that are actually needed for your application to function properly.