What is CORS and Why Does It Matter for APIs?

March 3, 2026

You're building a web app, you write a fetch() call to an API, and your browser throws this error:

Access to fetch at 'https://api.example.com/data' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Welcome to CORS. It confuses almost every developer the first time they encounter it. Let's clear it up.

What is CORS?

CORS stands for Cross-Origin Resource Sharing. It's a security feature built into web browsers that controls which websites can make requests to which servers.

An "origin" is the combination of protocol + domain + port. For example:

https://mysite.com is one origin
https://api.example.com is a different origin
http://localhost:3000 is yet another origin

When your JavaScript on mysite.com tries to fetch data from api.example.com, that's a cross-origin request. The browser will only allow it if the API server explicitly says it's okay — using CORS headers.

Why does CORS exist?

Without CORS, any website could make requests to any server using your browser's cookies and credentials. Imagine visiting a malicious website that silently sends requests to your bank's API using your logged-in session. CORS prevents this.

The rule is simple: browsers block cross-origin requests by default. The server must opt in by sending the right headers.

How CORS works

When you make a cross-origin request, the browser adds an Origin header to your request. The server checks this and responds with CORS headers:

// Server response headers
Access-Control-Allow-Origin: *              // Allow any origin
Access-Control-Allow-Origin: https://mysite.com  // Allow only this origin
Access-Control-Allow-Methods: GET, POST     // Allowed HTTP methods
Access-Control-Allow-Headers: Authorization // Allowed request headers

If the server doesn't include these headers, or if your origin isn't allowed, the browser blocks the response. Your JavaScript never sees the data.

Preflight requests

For certain requests (POST with JSON, requests with custom headers), the browser first sends an OPTIONS request called a "preflight" to ask the server what's allowed. If the preflight is rejected, the actual request is never sent.

CORS only affects browsers

This is the key insight: CORS is a browser security feature, not a server feature. The same API call that fails in your browser will work perfectly from:

cURL in your terminal
A Node.js or Python server
Postman or Insomnia
A mobile app

These tools don't enforce the same-origin policy. Only web browsers do.

How to handle CORS issues

1. Use APIs that support CORS

Many public APIs include Access-Control-Allow-Origin: * in their responses, which allows any website to call them. On API Bouncer, we track CORS support for each API — look for "CORS: yes" on the API detail page.

2. Use a backend proxy

The most reliable solution: make the API call from your server, not from the browser. Your server isn't restricted by CORS.

// Your Express.js server
app.get('/api/weather', async (req, res) => {
  const response = await fetch('https://api.example.com/weather');
  const data = await response.json();
  res.json(data); // Your frontend fetches from /api/weather instead
});

Your frontend calls /api/weather on your own server (same origin, no CORS issue), and your server calls the external API (no browser, no CORS restriction).

3. Use a CORS proxy (for development only)

Services like cors-anywhere let you proxy requests through their server to add CORS headers. This is fine for testing but should never be used in production — it adds latency and a dependency on a third-party service.

4. Check the API documentation

Some APIs support CORS but only for specific origins. You may need to register your domain in the API's developer dashboard.

Common misconceptions

"CORS is blocking my API" — No, your browser is blocking it. The API works fine; the browser is enforcing security.
"I can fix CORS in my frontend" — No. CORS headers must come from the API server. You can't change another server's response headers from your browser.
"CORS errors mean the API is broken" — Usually not. It means the API wasn't designed for direct browser access. Use a backend proxy instead.

Summary

CORS is a browser security feature that prevents unauthorized cross-origin requests. If an API supports CORS, you can call it directly from your frontend. If it doesn't, route requests through your own backend server. When browsing APIs on API Bouncer, check the CORS field to know what to expect before you start building.