How to Fix CORS Policy Blocked Error in Frontend and Backend

• AddCors registers CORS services

• WithOrigins allows specific frontend URL

• AllowAnyHeader allows all headers

• AllowAnyMethod allows GET, POST, etc.

• UseCors applies the policy

Fix CORS in Node.js (Express)

const cors = require('cors');
app.use(cors({
  origin: 'http://localhost:3000'
}));

Code Explanation

• cors middleware enables CORS

• origin defines allowed frontend URL

• Allows requests from specified origin

Fix CORS in Django Backend

CORS_ALLOWED_ORIGINS = [
    "http://localhost:3000",
]

Code Explanation

• Adds allowed origins

• Enables cross-origin requests

Allow All Origins (Development Only)

policy.AllowAnyOrigin()
      .AllowAnyHeader()
      .AllowAnyMethod();

Important Note

• Use only in development

• Not recommended for production due to security risks

Fixing CORS Error in Frontend

Frontend changes are limited but can help in certain cases.

Using Proxy in React

"proxy": "http://localhost:5000"

Code Explanation

• Redirects API calls to backend

• Avoids cross-origin during development

Using Fetch with Proper Headers

fetch("http://localhost:5000/api/data", {
  method: "GET",
  headers: {
    "Content-Type": "application/json"
  }
});

Code Explanation

• Sends request with correct headers

• Helps avoid unnecessary preflight requests

Handling Credentials (Cookies & Auth)

fetch(url, {
  credentials: "include"
});

Backend Setup

policy.AllowCredentials();

Explanation

• Required for authentication cookies

• Must match frontend and backend configuration

Common Mistakes to Avoid

Not Enabling CORS in Backend

Frontend alone cannot fix the issue.

Using AllowAnyOrigin with Credentials

This is not allowed and causes errors.

Incorrect Origin URL

Even small differences (http vs https) can fail.

Ignoring Preflight Requests

OPTIONS requests must be handled correctly.

Best Practices for CORS Configuration

Allow Specific Origins

Avoid allowing all origins in production.

Use Environment-Based Configuration

Different settings for development and production.

Secure Your APIs

Combine CORS with authentication and authorization.

Monitor API Traffic

Use logging to detect issues early.

Real-World Example

Frontend (React):

• Running on localhost:3000

Backend (ASP.NET Core API):

• Running on localhost:5000

Without CORS → request blocked
With CORS → request succeeds

This is a typical setup in modern full-stack development.

Summary

The CORS policy blocked error is a common issue when working with frontend and backend applications on different origins. It occurs because browsers enforce security rules to prevent unauthorized cross-origin requests. The most effective way to fix this issue is by configuring the backend to allow specific origins using proper CORS headers. While frontend workarounds like proxies can help during development, proper backend configuration is essential for production. By understanding how CORS works and applying best practices, developers can build secure and well-functioning web applications.