The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →CORS (Cross-Origin Resource Sharing) is an HTTP-header mechanism that lets a web server tell a browser which other origins may access a response through browser APIs such as fetch() and XMLHttpRequest. The server grants permission with response headers; the browser enforces that permission before JavaScript can read the response.
CORS does not make a request trusted, authenticate a caller, or replace authorization and CSRF defenses. It controls whether browser scripts can read a cross-origin response.
What does “cross-origin” mean?
An origin is the combination of a URL’s scheme, host, and port. All three must match. For example, https://app.example and https://api.example have different origins because their hosts differ, even though they share a parent domain. Likewise, changing https to http or changing the port creates a different origin.
The browser’s same-origin security model normally prevents a script loaded by one origin from reading data from another. CORS is the controlled exception: the API can identify permitted origins in its HTTP response, and the browser exposes the response only when those rules match.
#1 Best Overall
How CORS works in the browser
Requests that are sent directly
Some cross-origin requests meet the Fetch standard’s safelist conditions. The browser can send the request immediately, then inspect the response’s CORS headers. If the response does not grant the requesting origin, JavaScript receives a failure even though the server may have processed the request.
The phrase “simple request” is common but legacy terminology. The practical question is whether the method, request headers, and content type trigger a preflight; do not assume that every cross-origin request sends an OPTIONS request first.
Preflighted requests
If a request uses a non-safelisted method, request header, or content type, the browser first sends an OPTIONS preflight. The preflight describes the intended method and headers. The server must reply with permission for those values before the browser sends the actual request.
A typical preflight includes an Origin header and headers such as Access-Control-Request-Method and Access-Control-Request-Headers. The response can grant access with CORS headers including:
Access-Control-Allow-Origin: the requesting origin, or*for public non-credentialed access.Access-Control-Allow-Methods: methods the resource permits, such asGETorPOST.Access-Control-Allow-Headers: non-safelisted request headers the browser may send.Access-Control-Allow-Credentials: whether the browser may include credentials when the client requests them.
If the preflight response is missing a required permission, has an unsuitable status, or omits an intended method or header, the browser stops and does not expose the actual response to the script.
Rank #2
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
The CORS headers that matter
Access-Control-Allow-Origin
This is the central response header. It can contain one explicit origin, for example https://app.example, or * for a genuinely public resource that does not use credentials. The value must match the browser’s Origin value; a related domain is not enough.
If a server chooses a value dynamically from an allowlist, it should send Vary: Origin. That tells caches that responses can differ for different origins and prevents one origin’s cached permission from being served to another.
Methods and request headers
For a preflighted request, Access-Control-Allow-Methods must include the requested method, and Access-Control-Allow-Headers must include each requested non-safelisted header. A server can limit these values to the smallest set required by its application.
Exposing response headers
Even when a response is readable, browsers expose only the response headers allowed to scripts by default. If client code must read an additional response header, the server can name it with Access-Control-Expose-Headers. This is separate from allowing the response body itself.
Credentials
Cookies, HTTP authentication, and other credentials require an explicit trusted origin. A credentialed response cannot use Access-Control-Allow-Origin: *. The client must opt in to credentials (for example, with credentials: "include" in fetch()), and the server must return the exact allowed origin plus Access-Control-Allow-Credentials: true.
Rank #3
Do not reflect any incoming Origin value blindly. Validate it against a fixed allowlist first. CORS permission is not authentication: an allowed origin still needs normal authentication and authorization checks.
What a CORS request looks like
A readable public request
const response = await fetch("https://api.example/data");
if (!response.ok) throw new Error(`HTTP ${response.status}`);
const data = await response.json();For JavaScript to read this response, the API must return a matching Access-Control-Allow-Origin header. The API may use * when the resource is public and no credentials are involved.
A request that normally causes preflight
const response = await fetch("https://api.example/data", {
method: "PUT",
headers: {
"Content-Type": "application/json",
"X-Client-Version": "web-1"
},
body: JSON.stringify({ enabled: true })
});The browser first asks whether PUT, Content-Type, and X-Client-Version are allowed. The server’s OPTIONS response must grant the method and headers before the PUT is sent.
Credentialed fetch
const response = await fetch("https://api.example/profile", {
credentials: "include"
});The server must use an explicit trusted origin rather than *, return Access-Control-Allow-Credentials: true, and still enforce authentication and authorization.
What is a CORS error?
A CORS error is the browser’s report that JavaScript was not allowed to read a cross-origin response. The console message is intentionally generic; JavaScript usually sees a network-style failure rather than the server’s detailed reason. The server may have returned an error body, or even completed a state-changing action, while the browser hid that response from the script.
Rank #4
- 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
Common causes include a missing Access-Control-Allow-Origin header, a wrong origin, a preflight that does not allow the requested method or header, an invalid wildcard with credentials, a redirect whose destination lacks CORS headers, and an OPTIONS route that is blocked or returns an unsuitable response.
Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Scan for outdated or missing drivers - takes under a minute3Repair Windows errors before they cause bigger problemsHow to troubleshoot a CORS error
- Reproduce the failure in the browser. Open Developer Tools, check the Console for the diagnostic, then use the Network panel to find the request.
- Check the request origin. Inspect the exact
Originheader, including scheme, host, and port. Compare it with the server’s allowlist. - Look for an
OPTIONSrequest. If one appears, inspect its status and theAccess-Control-Request-MethodandAccess-Control-Request-Headersvalues. - Inspect the response headers. Confirm
Access-Control-Allow-Origin, allowed methods, allowed headers, credentials settings, and any required exposed headers. Check the final response after redirects as well as the preflight. - Match credential settings. If the client sends credentials, the server must name an explicit origin and allow credentials. Remove credentials if the endpoint is intended to be public.
- Check intermediary behavior. Proxies, caches, gateways, and web servers must preserve the relevant headers. When the value varies by origin, include
Vary: Origin. - If you do not control the server, change the architecture. Ask its operator to configure CORS or call the service from your own server-side integration. Browser JavaScript cannot grant itself permission.
Why mode: "no-cors" is not a fix
no-cors can produce an opaque response, but its body and most headers are inaccessible to JavaScript. It is useful only when the caller does not need to read the response, such as certain fire-and-forget resource loads. It does not turn a blocked API response into readable data.
Security rules for configuring CORS
- Use the narrowest origin allowlist that satisfies the application.
- Apply CORS to the API resources that need browser access, not indiscriminately to every response.
- Use
*only for genuinely public, non-credentialed resources. - Never reflect an arbitrary
Originvalue without validating it. - Keep authentication and authorization checks independent of CORS.
- Do not treat CORS as a general CSRF defense. Browsers can send some cross-origin requests even when they hide the response. Protect state-changing endpoints with appropriate CSRF controls;
SameSitecookies are one layer, not a complete solution. - If cross-domain calls are not expected, disable unnecessary CORS headers.
Choosing a CORS policy
| Scenario | Origin policy | Credentials |
|---|---|---|
| Public data API used without cookies | Access-Control-Allow-Origin: * |
Do not enable credentials |
| Known single-page app and API | Return the exact frontend origin from an allowlist | Enable only if required |
| Several approved frontends | Validate Origin, return the matching value, and send Vary: Origin |
Use explicit origins |
| No browser clients expected | Do not send CORS permission headers | Not applicable |
Or skip the browser setup
When you need a visual record of a page while diagnosing cross-origin behavior, ScreenshotNeo can capture it with one request instead of maintaining browser automation. Its cleaner accepts cookie-consent banners before capture and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each step can be disabled. Bot checks, CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and the response identifies the page verdict and billing status in headers. It also provides an MCP server for AI clients such as Claude and Cursor, with take_screenshot, get_page_info, and capture_pdf tools.
Use the API key and target URL shown in this example; see the ScreenshotNeo documentation for all options.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpThe free plan includes 1,000 screenshots per month with no card. Paid plans start at $5 for 3,000 screenshots. Create a free ScreenshotNeo account.
FAQ
Does CORS stop the server from receiving a request?
Not necessarily. CORS primarily controls whether browser JavaScript can read the response. Some requests can be sent even when the response is later hidden.
Can Postman or a server-side script bypass CORS?
CORS is enforced by browsers. Non-browser clients generally do not apply the same browser read restriction, but the API’s authentication and authorization rules still apply.
Why does the URL work when opened in a new tab?
Top-level navigation is different from a script trying to read a response. A page can load successfully while JavaScript remains unable to access its data cross-origin.
Frequently Asked Questions
Does CORS stop the server from receiving a request?
Not necessarily. CORS primarily controls whether browser JavaScript can read the response. Some requests can be sent even when the response is later hidden.
Windows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallOutdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchCan Postman or a server-side script bypass CORS?
CORS is enforced by browsers. Non-browser clients generally do not apply the same browser read restriction, but the API’s authentication and authorization rules still apply.
Why does the URL work when opened in a new tab?
Top-level navigation is different from a script trying to read a response. A page can load successfully while JavaScript remains unable to access its data cross-origin.
Quick Recap
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.
