Skip to main content

Cross-Origin Resource Sharing

What is CORS?​

Cross-Origin Resource Sharing (CORS) is a security feature implemented in browsers to control access to resources located outside of a given domain. It is a mechanism that allows or denies requests for resources from a web page served by one domain (the "origin") to a server at a different domain.

The Need for CORS​

Traditionally, web browsers implement a security model known as the Same-Origin Policy (SOP). SOP restricts web pages from making requests to a different domain than the one that served the web page. While this policy prevents malicious scripts from interacting with resources from another domain, it also limits legitimate cross-origin requests essential for modern web applications.

CORS was introduced as a solution to safely override the SOP under certain conditions, allowing controlled cross-origin requests, thus enabling functionalities like APIs, CDNs, and external libraries to work seamlessly across domains.

How CORS Works​

When a web application makes a cross-origin HTTP request, the browser automatically adds an Origin header to the request, indicating the domain of the web page. The server then decides whether to accept or reject this request based on its CORS policy.

If the server allows the request, it responds with the appropriate CORS HTTP headers, such as Access-Control-Allow-Origin, indicating which origins are permitted. The browser then permits the web page to access the response if the server's response matches the request's origin.

Implementing @ Server-Side​

  1. Configure the server to send CORS headers like Access-Control-Allow-Origin.
  2. Define which origins are allowed. This can be a specific domain, multiple domains, or a wildcard (*) for allowing any domain.
  3. Specify which HTTP methods (GET, POST, etc.) and headers are permitted.
  4. Handle preflight requests. Preflight requests use the OPTIONS method and are sent by the browser to determine if the actual request is safe to send.

Various frameworks in Java, JavaScript, Go, and Python offer built-in support or plugins for easily implementing CORS on the server side.

  • In Java, frameworks like Spring Boot and Jersey are prevalent. Spring Boot facilitates CORS through annotations such as @CrossOrigin and global configurations, while Jersey uses response filters to add CORS headers.
  • JavaScript (Node.js) frameworks such as Express.js, Hapi.js, and Koa.js each have their approaches. Express.js utilizes the cors middleware, Hapi.js offers plugins like hapi-cors-headers, and Koa.js supports CORS through third-party middleware.
  • For Go (Golang), frameworks like Gin and Echo provide in-built or middleware support for CORS. Gin includes built-in middleware for CORS configuration, whereas Echo uses a dedicated middleware for the same purpose.
  • In the Python ecosystem, Django and Flask are popular choices. Django's django-cors-headers middleware and Flask's Flask-CORS extension allow developers to control CORS headers with ease. FastAPI, a newer Python framework, also offers built-in support for CORS.

Implementing @ Client-Side​

  1. While handling CORS is primarily a server-side concern, understanding its impact on client-side development is crucial.
  2. Use JavaScript's XMLHttpRequest or the Fetch API to make cross-origin requests.
  3. Handle errors that arise due to CORS restrictions, which usually manifest as JavaScript errors indicating that the origin is not allowed.

Further Reading​

  1. CORS at MDN
  2. Fetch - the specification