You made a request from your frontend to your API and the console said blocked by CORS policy. It is one of the most common errors in web development, and also one of the most commonly fixed in a way that creates a security hole. Let us do it right.
What the error means
Your page on one origin tried to read a response from an API on a different origin, and the browser blocked it because the API did not say your origin is allowed. That block is a feature: by default, a page cannot read cross-origin responses, which stops a random site from quietly reading your logged-in data in another tab. See how CORS works for the full picture.
Want to see exactly what Prbl flags? Watch it scan a demo app, no repo or account needed.
See a live scan →The fix to avoid
The tempting fix is to allow everything:
// makes the error go away, and opens your API to every website
app.use(cors({ origin: "*", credentials: true }));This works, and it is the wrong answer. A wildcard origin with credentials lets any site the user visits call your API as that user and read the response. You removed the protection instead of configuring it. The details are in the CORS wildcard risk.
The right fix: an allowlist of your own origins
Name the origins you actually serve and reject the rest. Your frontend works; nobody else's does:
const allowed = new Set([
"https://app.example.com",
"https://example.com",
]);
app.use(cors({
origin: (origin, cb) => cb(null, !origin || allowed.has(origin)),
credentials: true,
}));Now credentials are only ever sent to origins you control. If the API you are calling is a third party you do not control, do not try to fix its CORS at all: call it from your own server instead, and return the result to the browser. The full fix, with framework variations, is in the CORS wildcard fix.
Frequently asked questions
What does 'blocked by CORS policy' actually mean?
It means your frontend, running on one origin, tried to read a response from an API on a different origin, and the browser blocked it because the API did not say that origin is allowed. CORS is a browser protection: by default a page cannot read cross-origin responses. The error is the browser enforcing that. The fix is to have the API explicitly allow your frontend's origin, not to disable the protection.
Why is 'origin: *' a bad fix?
Because it tells the browser that any website may call your API. On its own that is already too broad, and combined with credentials it lets a malicious site the user visits make authenticated requests as that user and read the responses. It makes the error go away by removing the protection entirely, which is why it is the fix to avoid. Allow your specific domains instead.
The error is on my own API. Where do I fix it?
On the server that serves the API, not the frontend. You configure the API to send an Access-Control-Allow-Origin header naming the origins you trust. In an Express app that is the cors middleware with an allowlist; in a serverless function it is setting the header yourself. The frontend cannot fix CORS; only the responding server can.
What if the API is a third party I don't control?
Then you cannot set its CORS headers, and calling it directly from the browser will keep failing. The correct pattern is to call it from your own server instead: your frontend calls your backend, and your backend calls the third-party API and returns the result. That also keeps any API key for that service server-side, where it belongs.
Check your CORS setup
A wildcard CORS origin is easy to set to fix an error and easy to forget once you add login, at which point it becomes a real exposure. A scan flags a permissive CORS setup with credentials. Run a free scan and check how open your API is.