How to Fix CORS Errors in JavaScript

Cross-origin fetches are blocked by browsers when the response lacks the Access-Control-Allow-Origin header.

You cannot change a third-party server's headers. A server-side proxy that adds the header is the standard fix, and it takes one request to set up.

Why the browser blocks your request

The same-origin policy restricts scripts to resources from the same scheme, host, and port. When your JavaScript fetches a different origin, the browser requires the response to carry an Access-Control-Allow-Origin header that permits your page. If the header is missing, the browser discards the response and logs the familiar error: "No 'Access-Control-Allow-Origin' header is present on the requested resource". For non-simple requests the browser also sends an OPTIONS preflight that the server must answer correctly.

The fix: route the request through a CORS proxy

curl "https://cors-proxy-web-toolbox.p.rapidapi.com/proxy?url=https://api.github.com/users/octocat" \
  -H "X-RapidAPI-Key: YOUR_KEY" \
  -H "X-RapidAPI-Host: cors-proxy-web-toolbox.p.rapidapi.com"

const upstream = "https://api.github.com/users/octocat";
const res = await fetch(
  "https://cors-proxy-web-toolbox.p.rapidapi.com/proxy?url=" + encodeURIComponent(upstream),
  { headers: {
      "X-RapidAPI-Key": "YOUR_KEY",
      "X-RapidAPI-Host": "cors-proxy-web-toolbox.p.rapidapi.com",
  } }
);
const data = await res.json();
console.log(data.login); // "octocat"

What you get back

The proxy fetches the upstream URL server-side, returns the body unchanged, and adds permissive CORS headers so the browser accepts it. GET and POST are supported, redirects are followed, and requests to private networks and internal IPs are blocked (SSRF protection).

When a proxy is the wrong tool

If you control the target server, set Access-Control-Allow-Origin on that server instead of using a proxy. And never forward your users' credentials or session tokens through any proxy; keep proxied requests to public data.