Cross-Origin Resource Sharing (CORS)
What is CORS?
CORS (Cross-Origin Resource Sharing) is a security feature that controls how web pages in one domain can request resources from another domain. It's essential for modern web applications that need to interact with different services and APIs.
Common CORS Headers
Access-Control-Allow-Origin: Defines allowed originsAccess-Control-Allow-Methods: Specifies allowed HTTP methodsAccess-Control-Allow-Headers: Lists allowed request headersAccess-Control-Allow-Credentials: Indicates whether the request can include user credentials
Instructions:
- Check the CORS headers in each response using DevTools Network tab
- Notice how different CORS headers affect request success/failure
- Try modifying request headers to see how CORS behavior changes:
- Add custom headers to trigger preflight requests
- Change Origin header to test domain restrictions
- Add credentials to test CORS with authentication
Successful CORS:
🤔Failed CORS:
CORS Result:
Preflight Requests
For certain types of requests, browsers send a preflight request using the HTTP OPTIONS method before the actual request. This preflight request checks if the server permits the actual request. The server responds with the allowed methods and headers, and if the preflight check passes, the browser proceeds with the actual request.
Example Scenario
Imagine a web page served from https://domain-a.com wants to fetch data from https://domain-b.com/api/data. Without CORS, the browser would block this request due to the Same-Origin Policy. With CORS, https://domain-b.com can include the following headers in its response to allow the request:
Access-Control-Allow-Origin: https://domain-a.comAccess-Control-Allow-Methods: GET, POSTAccess-Control-Allow-Headers: Content-Type