This blog is a repost of an internal company document I shared while I was at Cashfree Payments. It was part of a tech chit chat session.
What is CORS?
CORS stands for Cross-Origin Resource Sharing. It is a mechanism that allows restricted resources on a web server to be requested from another domain outside the server's origin. This is useful for developing web applications that need to access resources from multiple domains, such as single-page applications (SPAs) and social media websites.
Why is CORS needed?
CORS is needed to prevent security vulnerabilities. Without CORS, a malicious website could make requests to a trusted website and steal its data. For example, a malicious website could send a request to a bank's website to get the account balances of all its customers.
Ref: Ilija Eftimov's blog
How does CORS work?
Preflight requests check
Response headers check if no preflight.
1. Preflight requests
CORS works by adding additional HTTP headers to requests and responses. These headers tell the browser whether or not the request is allowed to proceed. When a browser makes a request to a different domain, it first sends a preflight request with the OPTIONS method. This request allows the browser to ask the server which HTTP methods and headers are allowed for the requested resource. The server then responds with a preflight response that contains the Access-Control-Allow-Origin header. This header tells the browser which origins are allowed to access the resource. If the browser's origin is included in the Access-Control-Allow-Origin header, the browser will proceed with the request. Otherwise, the browser will block the request.
Are preflight requests sent for all requests?
No. Not for every request. A browser decides to send preflight requests based on below properties of a request: A request that uses methods other than GET, POST, or HEAD A request that includes headers other than Accept, Accept-Language or Content-Language A request that has a Content-Type header value other than application/x-www-form-urlencoded, multipart/form-data, or text/plain. (If it has Content-Type application/json preflight request is made)
2. Can we get CORS error even without preflight requests?
Yes. In this case, the request will have a 200 OK status but the browser will block the response data if the response CORS headers is not valid.
How to implement?
To implement CORS, you need to have the following HTTP headers to your responses / and options call response: 1 Access-Control-Allow-Origin: https://example.com 2 Access-Control-Allow-Methods: GET, POST, PUT, DELETE 3 Access-Control-Allow-Headers: Content-Type, Authorization 4 Access-Control-Max-Age: (default 5 seconds)
How to debug CORS errors?
If you are getting CORS errors, you can use the following tips to debug them:
Check the Access-Control-Allow-Origin header to make sure that the browser's origin is included in the list of allowed origins.
Check the Access-Control-Allow-Methods header to make sure that the browser is using a supported HTTP method.
Check the Access-Control-Allow-Headers header to make sure that the browser is sending all of the required headers.