Choorai
Common Error

Fixing CORS Errors

Getting "Access to XMLHttpRequest blocked by CORS policy"? This is a common issue when your frontend and backend are on different domains.

TL;DR

Set the Access-Control-Allow-Origin header on your backend server. Use * during development and specify the actual domain in production.

심각코드: 403

Access to XMLHttpRequest at 'http://api.example.com' from origin 'http://localhost:3000' has been blocked by CORS policy

원인

The frontend (localhost:3000) sent a request to a backend on a different domain (api.example.com), but the backend did not allow this request.

해결책
Access-Control-Allow-Origin: https://your-frontend.com

Solution by Framework

Python FastAPI

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

app = FastAPI()

# CORS configuration
app.add_middleware(
    CORSMiddleware,
    allow_origins=[
        "http://localhost:3000",      # Development
        "https://your-domain.com",    # Production
    ],
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

Node.js Express

server.js
const express = require('express');
const cors = require('cors');

const app = express();

// CORS configuration
app.use(cors({
  origin: [
    'http://localhost:3000',
    'https://your-domain.com'
  ],
  credentials: true
}));

Security Warning

Do not use allow_origins=["*"] in production! Only allow your actual frontend domain.

How to Verify the Fix

  1. Restart your backend server
  2. Open browser DevTools (F12) → Network tab
  3. Send the request again and check the Response Headers
  4. If the Access-Control-Allow-Origin header is present, success!

Prerequisites

  • You can identify exact frontend and backend URLs.
  • You can edit backend CORS settings (main.py or server.js).
  • You can inspect requests in browser DevTools Network tab.

Validation

  1. OPTIONS preflight returns 200 or 204.
  2. Access-Control-Allow-Origin is present with the exact origin.
  3. If credentials are enabled, Access-Control-Allow-Credentials=true and origin is not *.

Troubleshooting

  • Check whether reverse proxies (Nginx/Cloudflare) overwrite CORS headers.
  • Verify protocol/port/trailing-slash consistency in origin matching.
  • Clear browser cache and re-test with hard refresh.

References

Related Articles

Last updated: February 22, 2026 · Version: v0.0.1

Send Feedback

Opens a new issue page with your message.

Open GitHub Issue