If you’ve ever built a web application that needs to communicate with a server on a different domain, you’ve likely encountered Cross-Origin Resource Sharing (CORS). CORS is a browser security feature that controls how a web page can access resources from another origin (domain, protocol, or port). While its purpose is to protect users, CORS can also be a bit of a hurdle for developers if not configured correctly. In this post, we’ll dive into what CORS is, how it works, and how to manage it in your projects.
What is CORS?
By default, web browsers enforce a same-origin policy to protect users from malicious websites trying to access sensitive data from other sites. This policy restricts a page from making HTTP requests to a different origin than its own. However, there are many legitimate scenarios—like a frontend app on https://mywebsite.com needing to access data from an API on https://api.otherdomain.com—where cross-origin requests are necessary. CORS provides a secure way to manage these requests, allowing servers to specify who can access their resources.
How CORS Works
When a browser makes a request to a different origin, the server can respond with CORS headers that grant or deny access. Let’s break down the key components.
1. Simple Requests
For straightforward requests (usually a GET or POST with standard headers), the browser sends the request, and the server decides whether to allow it by returning an Access-Control-Allow-Origin header. For instance:
Access-Control-Allow-Origin: https://mywebsite.com
This response header indicates to the browser that requests from https://mywebsite.com are allowed. If a match is found, the request succeeds. Otherwise, it’s blocked.
2. Preflight Requests
For more complex interactions (like PUT, DELETE, or requests with custom headers), the browser first sends a preflight request. This is an OPTIONS request sent before the actual request to check if the server will permit the cross-origin request. If the server responds to the preflight with specific CORS headers, the actual request proceeds.
Example Preflight Request
OPTIONS /some-resource HTTP/1.1 Origin: https://mywebsite.com Access-Control-Request-Method: DELETE
Example Preflight Response
Access-Control-Allow-Origin: https://mywebsite.com Access-Control-Allow-Methods: GET, POST, DELETE Access-Control-Allow-Headers: Content-Type
In this response, the server specifies that https://mywebsite.com is allowed to make DELETE requests and will accept a Content-Type header.
Common CORS Headers
| Header | Description | Example Value |
|---|---|---|
| Access-Control-Allow-Origin | Specifies which origins are allowed to access the resource. Using * allows all origins but may introduce security risks. | * or https://example.com |
| Access-Control-Allow-Methods | Lists the HTTP methods allowed for cross-origin requests. | GET, POST, PUT, DELETE |
| Access-Control-Allow-Headers | Specifies which headers the client is permitted to include in the request. | Content-Type, Authorization |
| Access-Control-Allow-Credentials | Indicates whether cookies or credentials can be included in the cross-origin request. | true (allows credentials) |
CORS in Practice
Configuring CORS can feel tricky, but most servers and frameworks have built-in support. For example:
| Framework | Tool | Setup | Example Configuration |
|---|---|---|---|
| Express.js (Node.js) | cors middleware package | Install with npm install cors, then use app.use(cors()) in your application to apply CORS policies. | javascript\nconst cors = require('cors');\napp.use(cors({\n origin: 'https://example.com',\n methods: ['GET', 'POST'],\n allowedHeaders: ['Content-Type', 'Authorization'],\n credentials: true\n}));\n |
| Django (Python) | django-cors-headers package | Install with pip install django-cors-headers. Add 'corsheaders' to INSTALLED_APPS, and add CorsMiddleware at the top of MIDDLEWARE in settings.py. | python\nCORS_ALLOWED_ORIGINS = [\n 'https://example.com',\n]\nCORS_ALLOW_METHODS = ['GET', 'POST']\nCORS_ALLOW_HEADERS = ['Content-Type', 'Authorization']\nCORS_ALLOW_CREDENTIALS = True\n |
Conclusion
CORS is a powerful feature that enhances web security, but understanding how to configure it properly is essential for a smooth development process. By specifying which origins, methods, and headers are allowed, you can securely open your APIs to trusted applications. With the right CORS configuration, you can create seamless, secure interactions between your web pages and APIs on different domains.
Double Yew! 