DEV Community

Callie Schneider
Callie Schneider

Posted on • Originally published at abundanceapis.com

Fix CORS Errors in JavaScript: The 5-Minute Proxy Solution

#webdev #javascript #cors #api

Canonical version on our guides page. Disclosure: I built the proxy used in the examples — it has a permanent free tier.

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 catch: you cannot change a third-party server's headers. A server-side proxy that adds the header is the standard fix.

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"
Enter fullscreen mode Exit fullscreen mode 
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"
Enter fullscreen mode Exit fullscreen mode

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 — the proxy pins DNS-validated public IPs and re-validates every redirect hop).

When a proxy is the wrong tool

  • If you control the target server, set Access-Control-Allow-Origin there instead.
  • Never forward end-user credentials or session tokens through any third-party proxy. Keep proxied requests to public data.

Try it without signing up

There's a free in-browser tester at abundanceapis.com/tools/cors-proxy-tester — paste a URL and see the proxied response. The API itself has a free tier (1,000 requests/month).

Questions about CORS edge cases (preflights, credentials, redirects)? Happy to answer in the comments.

Top comments (0)