Daniel Lyons' Notes

CORS

CORS stands for Cross Origin Resource Sharing.

What is CORS?

Cross-Origin Resource Sharing (CORS) is a security mechanism implemented in web browsers that allows servers to specify which origins (i.e., combinations of domain, protocol, and port) are permitted to access resources on that server123467. CORS is designed to safely relax the browser’s default same-origin policy, which restricts web pages from making requests to a domain different from the one that served the web page12346.

Why Does CORS Exist?

The same-origin policy was introduced to prevent security vulnerabilities like cross-site request forgery (CSRF), where a malicious website could interact with sensitive data on another site using a user's credentials16. However, this policy is very restrictive for modern web applications that often need to access APIs or resources hosted on different domains. CORS provides a controlled way to allow such cross-origin requests while maintaining security12346.

How Does CORS Work?

  • When a browser-based application tries to access a resource on a different origin, the browser automatically adds an Origin header to the HTTP request25.
  • The server can respond with specific CORS headers, such as Access-Control-Allow-Origin, to indicate which origins are allowed to access the resource25.
  • For certain types of requests (e.g., those using methods other than GET/POST or custom headers), the browser sends a preflight request using the HTTP OPTIONS method to check if the actual request is safe to send2345.
  • The server replies with headers that specify allowed methods, headers, and whether credentials (like cookies) can be included25.

If the server’s response allows the origin, the browser proceeds with the request; otherwise, it blocks it25.

Key CORS Headers

  • Access-Control-Allow-Origin: Specifies which origin(s) are allowed.
  • Access-Control-Allow-Methods: Lists allowed HTTP methods (GET, POST, etc.).
  • Access-Control-Allow-Headers: Lists allowed custom headers.
  • Access-Control-Allow-Credentials: Indicates if credentials (cookies, HTTP authentication) are permitted5.

Types of CORS Requests

  • Simple Requests: Use standard methods (GET, HEAD, POST with specific content types) and do not trigger a preflight check5.
  • Preflight Requests: For requests that might affect user data or use custom headers/methods, the browser first checks with the server using an OPTIONS request2345.
  • Actual Requests: The main request, sent after a successful preflight (if required)5.

Summary Table

Feature Description
Purpose Allows controlled cross-origin requests in browsers
Default Policy Same-origin policy (restricts cross-domain requests)
CORS Mechanism Uses HTTP headers to permit or deny cross-origin requests
Preflight Request OPTIONS method to check permissions for complex requests
Key Headers Access-Control-Allow-Origin, -Methods, -Headers, -Credentials
Security Benefit Prevents unauthorized cross-origin access while enabling needed integrations

CORS is essential for modern web applications that interact with APIs or resources across different domains, balancing security and flexibility1234567.

CORS
Interactive graph
On this page
What is CORS?
Why Does CORS Exist?
How Does CORS Work?
Key CORS Headers
Types of CORS Requests
Summary Table