How to Fix the “No ‘Access-Control-Allow-Origin’ Header” Error

You’ve probably encountered this error before. It’s annoying, but it’s part of web development. This article covers all the ways you can fix the “No Access-Control-Allow-Origin” error.

CORS Error

Understanding the “Access-Control-Allow-Origin” Error

There are two types of “Access-Control-Allow-Origin” errors:

1. CORS header 'Access-Control-Allow-Origin' missing
2. CORS header 'Access-Control-Allow-Origin' does not match 'xyz'

The first error occurs when the header is not present, so the browser cannot validate whether the origin is allowed to make the cross-origin request. The second error occurs when the header is present, but the returned value is different from the expected one.

If You Own the API

Ensure You Have the Proper CORS Header

If you own the API, it is straightforward. You can solve this by adding the Access-Control-Allow-Origin header and specifying your origin. Make sure to use the correct origin.

For example, in Express:

const express = require("express");
const cors = require("cors");
const app = express();

app.use(
  cors({
    origin: ["http://localhost:3000"], // Add allowed origins here
  })
);

Specifiying allowed origin in the backend

Depending on your backend technology, you might want to check out different implementations to enable it. Here is a resource (although a bit old) called enable-cors.org that lists some ways to enable CORS in your backend.

If You Don’t Own the API

Route the Request Through Your Backend

If you don’t own the API but have your own backend, you can create a dedicated endpoint in your backend to fetch the target API instead of fetching it directly from the frontend. Then, your frontend will call this new endpoint. This way, the actual request is made from the backend, and since CORS only applies to the frontend, your request will go through.

For example, if you have an Express backend:

const app = express();

// use if backend and frontend in different origin
const cors = require("cors");
app.use(cors());

app.get("/data", (req, res) => {
  fetch("<TARGET_URL>")
    .then((response) => response.json())
    .then((data) => res.json(data));
});

Fetching target URL in the backend

And in your frontend:

await fetch(`<YOUR_BACKEND_URL>/data`);

Frontend code fetching backend

Use a CORS Proxy

If you don’t own the API and don’t have a backend, you can use a CORS proxy. A CORS proxy works by fetching the resource on your behalf and returning the data with the appropriate CORS header. We previously covered about CORS proxy in our article.

For example, here’s how to do it with Corsfix:

fetch("https://proxy.corsfix.com/?<TARGET_URL>");

Fetch using a CORS Proxy

Conclusion

We have covered options you can use to solve the “No Access-Control-Allow-Origin” header error, depending on your situation. You can either make changes to your backend or use a CORS proxy. There are also some common mistakes developers make when dealing with CORS, which you can find in our “Common CORS Mistakes” article.

If you are looking for a production-ready, fast, and unlimited CORS proxy, check out Corsfix. You can start developing with Corsfix for free, and when you are ready for production, you can choose any of the plans that suit your needs.

Comments

[reynaldi]

the access control allow origin error can be frustrating, but it doesn't have to be that way once you know how to solve them