CORS (Cross-Origin Resource Sharing) is a browser security mechanism that controls how web pages can access resources hosted on different websites or domains.
It allows servers to specify which external websites are permitted to request their resources. This helps protect users and applications from unauthorized access while still enabling legitimate communication between different services.
CORS is commonly used when websites interact with APIs, external services, or resources hosted on separate domains.
Table of Contents
What Is an Origin?
Before understanding CORS, it is important to understand the concept of an origin.
An origin is defined by three elements:
- Protocol (HTTP or HTTPS)
- Domain name
- Port number
For example:
https://example.com
and
https://api.example.com
are considered different origins because they use different domains.
Why CORS Exists
Modern browsers follow a security model known as the Same-Origin Policy.
By default, a webpage can only access resources from the same origin that served the page.
Without this restriction, a malicious website could potentially access sensitive information from other websites that a user is logged into.
CORS provides a controlled way for servers to relax this restriction when cross-origin access is required.
How CORS Works
When a webpage attempts to access a resource from a different origin, the browser sends a request to the target server.
The server can respond with specific HTTP headers that indicate whether the request should be allowed.
One of the most common headers is:
Access-Control-Allow-Origin
This header tells the browser which origins are permitted to access the resource.
If the server allows the requesting origin, the browser grants access to the response. If not, the browser blocks access and reports a CORS error.
Simple and Preflight Requests
CORS requests are generally divided into two categories.
Simple Requests
Simple requests use standard HTTP methods such as:
- GET
- HEAD
- POST
For these requests, the browser sends the request directly and then checks whether the server permits access.
Preflight Requests
Some requests require additional verification before they are sent.
In these cases, the browser first sends a preliminary request known as a preflight request using the HTTP OPTIONS method.
The server responds with information about:
- Allowed origins
- Allowed HTTP methods
- Allowed headers
Only if the response permits the operation will the browser send the actual request.
Same-Origin Policy vs. CORS
Same-Origin Policy ≠ CORS
These concepts work together but serve different purposes.
| Same-Origin Policy | CORS |
|---|---|
| Browser security restriction | Permission mechanism |
| Blocks cross-origin access by default | Allows approved cross-origin access |
| Applied automatically by browsers | Configured by the server |
| Protects users from unauthorized access | Enables secure communication between services |
CORS does not replace the Same-Origin Policy. It provides controlled exceptions to it.
Common Use Cases
CORS is commonly used for:
- API integrations
- Single-page applications (SPAs)
- External authentication services
- Payment gateways
- Content delivery networks (CDNs)
- Third-party integrations
Many modern web applications rely on CORS to communicate with external services.
Practical Implications
CORS is primarily a browser security feature.
A CORS error does not necessarily mean the server is unavailable. In many cases, it means the server has not explicitly allowed the requesting origin.
Website owners and developers may encounter CORS-related issues when connecting applications to APIs or external services. Resolving these issues typically involves adjusting the server’s CORS configuration.
Summary
CORS (Cross-Origin Resource Sharing) is a browser security mechanism that allows servers to control which external websites can access their resources. It works alongside the Same-Origin Policy to enable secure communication between different web applications, APIs, and services while helping protect users from unauthorized access.