CORS (Cross-Origin Resource Sharing) is a browser security mechanism that controls which web pages can make requests to which servers. When your JavaScript on example.com tries to fetch data from api.different.com, the browser applies CORS rules. If the server at api.different.com does not explicitly permit requests from example.com, the browser blocks the response. Understanding CORS is essential for any developer who works with APIs.
Why CORS Exists
Without CORS restrictions, a malicious website could use your browser as a proxy to make authenticated requests to any website you are logged into. If you were logged into your bank on a tab in the same browser, a malicious site could make JavaScript fetch requests to your bank's API using your session cookie. The bank's response would go to the malicious site's JavaScript. This attack is called cross-site request forgery in its cookie-based form.
CORS prevents this by requiring the server to explicitly declare which origins are allowed to receive its responses. Your browser enforces this policy on your behalf.
Same Origin vs Cross Origin
An origin is the combination of the scheme (https://), the hostname (example.com), and the port (if non-default). Two URLs with the same scheme, hostname, and port are the same origin. Any difference makes them different origins.
https://example.com and https://api.example.com are different origins because the hostnames differ. https://example.com and http://example.com are different origins because the schemes differ.
How CORS Works
Simple requests (GET, POST with limited content types) are sent directly. The browser checks the Access-Control-Allow-Origin header in the response. If it matches the request's origin (or is a wildcard *), the response is passed to JavaScript. If not, it is blocked.
Preflight requests happen before complex requests (DELETE, PUT, PATCH, or requests with custom headers). The browser sends an OPTIONS request asking the server which methods and headers are allowed. The server's preflight response either permits or denies the actual request.
The Key Response Headers
Access-Control-Allow-Origin: * allows any origin (acceptable for public, non-authenticated APIs). Access-Control-Allow-Origin: https://example.com allows only that specific origin (required for APIs that use cookies or Authorization headers). Access-Control-Allow-Methods lists the permitted HTTP methods. Access-Control-Allow-Headers lists the permitted custom headers.
Using the DevHexLab CORS Tester
Open the tool at /tools/network/cors-tester. Enter the API URL and the origin you are testing from. The tool sends a preflight request and shows whether the server's CORS configuration permits the request.
Frequently Asked Questions
Why does CORS work in Postman but not in my browser?
Postman is not a browser. It does not enforce CORS restrictions. CORS is a browser security feature that only applies to JavaScript running in a browser context. Command-line tools and backend services are not subject to CORS.
Can I bypass CORS from my frontend?
No. CORS is enforced by the browser and cannot be circumvented from JavaScript. To fix a CORS error, the server must be configured to allow the origin, or you must proxy the request through your own backend.
Fix CORS on the server. Never try to disable it in the browser.