Fix "Blocked by CORS Policy" Error

The "blocked by CORS policy" error is one of the most frustrating errors in web development. It happens when your browser blocks a request to a different domain because the server doesn't permit it. This guide covers every fix — from Express middleware to Nginx headers to development proxies.

What is a CORS Error?

CORS stands for Cross-Origin Resource Sharing. Browsers enforce a security rule called the Same-Origin Policy — a page on https://app.com cannot make requests to https://api.otherdomain.com unless the server explicitly allows it via HTTP response headers.

When those headers are missing or incorrect, the browser blocks the response and you see the error in your console. The server did receive and process your request — the browser just refuses to hand the response to your JavaScript code.

Common Causes

• Missing CORS headers: The server does not send Access-Control-Allow-Origin in its response.
• Wrong origin value: The server allows https://app.com but your request comes from http://localhost:3000.
• Preflight request fails: The server doesn't handle the OPTIONS method or doesn't return Access-Control-Allow-Methods.
• Credentials issue: You're sending cookies but the server doesn't set Access-Control-Allow-Credentials: true (and you can't use * for the origin).

How to Fix CORS Error

npm install cors

// Allow all origins (development only)
const cors = require('cors');
app.use(cors());

// Allow a specific origin (production)
app.use(cors({
  origin: 'https://yourdomain.com',
  methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
  allowedHeaders: ['Content-Type', 'Authorization'],
  credentials: true,          // only if you need cookies/auth
}));

// Handle preflight for all routes
app.options('*', cors());

from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware

app = FastAPI()

app.add_middleware(
    CORSMiddleware,
    allow_origins=["https://yourdomain.com"],  # or ["*"] for dev
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

location /api/ {
    add_header 'Access-Control-Allow-Origin' 'https://yourdomain.com' always;
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE' always;
    add_header 'Access-Control-Allow-Headers' 'Authorization, Content-Type' always;

    if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Allow-Origin' 'https://yourdomain.com';
        add_header 'Access-Control-Max-Age' 1728000;
        add_header 'Content-Type' 'text/plain charset=UTF-8';
        add_header 'Content-Length' 0;
        return 204;
    }
}

export default {
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:8000',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^/api/, ''),
      },
    },
  },
}

{
  "proxy": "http://localhost:8000"
}

Fix CORS Without Backend Access

If you can't modify the server (e.g., a third-party API), your options are limited but not zero:

• Use a CORS proxy for testing only — services like https://corsproxy.io forward your request and add CORS headers. Never use these in production with sensitive data.
• Create a backend proxy route — have your own server forward the request to the third-party API. Your frontend calls your server (same origin), your server calls the API.
• Use Next.js API routes or Edge Functions — create pages/api/proxy.ts to forward requests server-side.

5 CORS Error Messages Explained

Frequently Asked Questions

Related Developer Tools