Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

CORS (Cross-Origin Resource Sharing) is a browser-enforced, HTTP-header protocol that lets a server specify which other origins may read its responses. When a browser blocks a cross-origin request, the fix is usually to configure the server or API gateway—not to change the calling JavaScript.

What counts as a different origin?

An origin is the combination of a URL’s scheme, host, and port. A request is cross-origin if any of those differ from the page’s origin. For example, https://app.example.com and https://api.example.com are different origins because their hosts differ; http://app.example.com is different because its scheme differs. A non-default port also creates a different origin.

The browser’s same-origin policy restricts what scripts can read across origins. CORS is the server’s way to grant controlled exceptions. It does not make the request same-origin, and it is not authentication or authorization. See MDN’s CORS overview for the protocol details.

How does CORS work?

When a page’s JavaScript uses fetch() or XMLHttpRequest to contact another origin, the browser includes an Origin request header. The server indicates whether that origin can read the response by returning an Access-Control-Allow-Origin response header. The browser enforces the decision: JavaScript cannot grant itself cross-origin access.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Simple requests

Some requests qualify as “simple” under CORS rules and can be sent without a preliminary check. The browser still checks the response headers before making the response available to JavaScript. A request being sent successfully does not mean the calling script is allowed to read its response.

Preflight requests

A request using a non-safelisted method or request header commonly triggers a preflight. Before sending the actual request, the browser sends an OPTIONS request with the intended method in Access-Control-Request-Method and, when applicable, intended headers in Access-Control-Request-Headers. The server must respond with permission for the requesting origin and the requested method and headers, typically through Access-Control-Allow-Origin, Access-Control-Allow-Methods, and Access-Control-Allow-Headers. If the check passes, the browser proceeds with the actual request.

Rank #2
Sale
HTML and CSS: Design and Build Websites
  • HTML CSS Design and Build Web Sites
  • Comes with secure packaging
  • It can be a gift option

A CORS preflight never includes credentials, according to the Fetch Standard. The server therefore needs to handle the OPTIONS request without relying on cookies or other credentials that the preflight does not send.

Why am I getting a CORS error?

A CORS error means the browser could not establish permission to expose the response to the requesting page. Common causes include a missing or incorrect allowed-origin header, a preflight that does not permit the method or headers, a redirect during preflight, or an invalid combination of credential and origin settings.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Look in the browser’s developer tools: check the Console for the reported CORS failure and the Network panel for both the OPTIONS preflight and the actual request. Inspect status codes, redirects, request headers, and response headers. Browsers intentionally do not expose detailed CORS failure information to page JavaScript, so the console and network panel are the useful diagnostics. MDN’s CORS error guide describes common messages.

How do I allow CORS on a server?

Configure the server, API gateway, or other layer that returns the endpoint’s HTTP response. Use a trusted allowlist for origins; if the server dynamically reflects the request’s Origin, validate it against that allowlist first. Return the CORS headers on the preflight response where needed and on the actual response, including error responses when the browser needs to read them.

Rank #4
Sale
Web Design with HTML, CSS, JavaScript and jQuery Set
  • Brand: Wiley
  • Set of 2 Volumes
  • A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
  1. Identify the exact origin. Record the page’s scheme, host, and port, including whether it uses HTTP or HTTPS.
  2. Allow that origin. Return its validated origin in Access-Control-Allow-Origin. Do not use * for credentialed responses.
  3. Handle preflight at the endpoint. Ensure the route or gateway can answer OPTIONS directly without an authentication requirement or redirect that prevents the browser from completing the check.
  4. Allow the requested method and headers. Include the method in Access-Control-Allow-Methods and non-safelisted request headers in Access-Control-Allow-Headers.
  5. Configure credentials only if required. If cross-origin cookies or HTTP authentication are intentionally supported, return Access-Control-Allow-Credentials: true and the specific allowed origin.
  6. Expose response headers only when needed. Use Access-Control-Expose-Headers for non-safelisted response headers that calling JavaScript must read.
  7. Test both requests. Verify the preflight response and the actual response in the Network panel; passing one does not guarantee the other is configured correctly.

Access-Control-Max-Age can let the browser cache preflight permission decisions. Set it deliberately: browser-imposed limits may affect how long a decision is retained, and a cached preflight can make configuration changes appear delayed during testing.

Why does CORS fail with credentials?

Cross-origin Fetch requests do not send credentials by default. To include them, use credentials: "include"; with XMLHttpRequest, set withCredentials = true. The server must return both Access-Control-Allow-Credentials: true and an explicit Access-Control-Allow-Origin value matching the allowed origin. A wildcard origin (*) is not valid for a credentialed response.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

CORS permission does not override cookie rules. Browser restrictions on third-party cookies may still prevent cookies from being sent even when the CORS headers are correct. CORS controls whether browser scripts may read a response; it does not prove a user is authorized to access the underlying resource.

Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Support on Ko-Fi

Can I fix CORS from JavaScript?

Not when the server has not granted permission. Client code cannot add a response header controlled by a different server. The Fetch option mode: "no-cors" is not a general workaround: it produces an opaque response that JavaScript cannot inspect. If you control the server, fix its CORS configuration; otherwise, ask its operator to allow the intended origin or use an authorized server-side integration.

CORS troubleshooting checklist

  • No Access-Control-Allow-Origin: configure a response header for the requesting origin after validating it against the intended allowlist.
  • Preflight rejects the method: permit the requested method in Access-Control-Allow-Methods.
  • Preflight rejects a header: permit the requested header in Access-Control-Allow-Headers.
  • Credential error: return the exact allowed origin and Access-Control-Allow-Credentials: true; separately check whether cookie policy allows the cookie.
  • Preflight is redirected: make the preflight target directly reachable without the redirect, or remove the redirect from that route.
  • no-cors appears to silence the error: the response is opaque, not readable; this does not solve the access requirement.
  • Preflight succeeds but the request still fails: inspect the actual response for its CORS headers and check whether the endpoint or an intermediary handles success and error responses consistently.

Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.