CORS (Cross-Origin Resource Sharing) Cheat Sheet

Here’s a cheat sheet on Cross-Origin Resource Sharing (CORS):

What is CORS

CORS is a security feature implemented by web browsers to control how web pages in one domain can request and interact with resources hosted on another domain.

CORS Headers

Access-Control-Allow-Origin:

  • Specifies which origins are permitted to access the resource.
  • Example:
Access-Control-Allow-Origin: https://example.com

Access-Control-Allow-Methods:

  • Specifies the HTTP methods allowed when accessing the resource.
  • Example:
Access-Control-Allow-Methods: GET, POST, PUT, DELETE

Access-Control-Allow-Headers:

  • Specifies the HTTP headers allowed when accessing the resource.
  • Example:
Access-Control-Allow-Headers: Content-Type, Authorization

Access-Control-Allow-Credentials:

  • Indicates whether the browser should include credentials (e.g., cookies) when making the actual request.
  • Example:
Access-Control-Allow-Credentials: true

Access-Control-Expose-Headers:

  • Indicates which headers should be exposed to the browser when the response is received.
  • Example:
Access-Control-Expose-Headers: Authorization

Access-Control-Max-Age:

  • Specifies how long the results of a preflight request (OPTIONS) can be cached.
  • Example:
Access-Control-Max-Age: 86400

Handling CORS on the Server

Allow All Origins:

  • Allow requests from any origin. Use with caution.
Access-Control-Allow-Origin: *

Allow Specific Origins:

  • Specify allowed origins explicitly.
Access-Control-Allow-Origin: https://example.com

Handling Preflight Requests:

  • OPTIONS requests are preflighted to check permissions.
    • Server response should include CORS headers.
    • Browser sends a preflight request before the actual request.
    • Example:
Access-Control-Allow-Methods: GET, POST
Access-Control-Allow-Headers: Content-Type, Authorization

Common CORS Issues and Solutions

  • No ‘Access-Control-Allow-Origin’ Header:
    • Solution:
      • Ensure the server includes the appropriate Access-Control-Allow-Origin header.
  • Credentials Flag Cannot be True:
    • Solution:
      • Set Access-Control-Allow-Credentials to true on the server.
  • Methods/Headers not Allowed:
    • Solution:
      • Include allowed methods and headers in the Access-Control-Allow-Methods and Access-Control-Allow-Headers headers.

Frontend Considerations

  • Include Credentials:
    • Set withCredentials to true in XMLHttpRequest or credentials: 'include' in Fetch API.
  • Headers and Cookies:
    • Ensure that headers and cookies are allowed by the server and specified in CORS headers.
  • Handling Errors:
    • Check the browser console for CORS-related errors.
    • Use try-catch to handle errors in JavaScript.

Testing CORS

CORS Preflight Check:

  • Use tools like browser developer tools or online CORS testing tools to check for preflight requests.

7. Additional Resources:

This cheat sheet provides an overview of CORS headers, server-side configurations, common issues, and frontend considerations. Adjust configurations based on your specific use case and security requirements.