⌘K
We use cookies to improve your experience
We use essential cookies to make our site work. With your consent, we may also use non-essential cookies to improve user experience.
Definition
CORS (Cross-Origin Resource Sharing) is a browser security mechanism that controls which web domains can make requests to a different domain. It prevents malicious websites from making unauthorized API calls using your credentials, while allowing legitimate cross-origin requests.
Browsers enforce a same-origin policy: JavaScript on page-a.com cannot make fetch/XMLHttpRequest calls to api-b.com by default. This prevents a malicious site from silently making requests to your bank's API using your logged-in session cookies. However, legitimate use cases require cross-origin requests — a frontend on app.example.com needs to call its API on api.example.com, or a website needs to load fonts from Google Fonts. CORS is the mechanism that enables these legitimate cross-origin requests while maintaining security.
When a browser makes a cross-origin request, it includes an Origin header. The server responds with Access-Control-Allow-Origin indicating which origins are permitted. For "simple" requests (GET/POST with basic headers), this is all that happens. For "complex" requests (PUT/DELETE, custom headers, JSON content type), the browser first sends a preflight OPTIONS request to ask the server if the actual request is allowed. The server's response includes allowed methods, headers, and whether credentials (cookies) are permitted.
CORS errors are among the most frequently encountered issues in web development. "No 'Access-Control-Allow-Origin' header is present" means the server does not include the required header. The fix is server-side: configure your API to return the appropriate CORS headers. Using Access-Control-Allow-Origin: * allows any origin but disables credentials. For authenticated requests, you must specify the exact origin and set Access-Control-Allow-Credentials: true. During development, a proxy (built into Create React App, Vite, and Next.js) can bypass CORS by routing API calls through the dev server.