Web Development  

How to Fix CORS Policy Blocked Error in Frontend and Backend

Introduction

If you are working on modern web applications using React, Angular, or any frontend framework with a backend API, you have likely encountered the CORS policy blocked error. This is one of the most common issues developers face while integrating frontend and backend services.

The error usually appears in the browser console and prevents your application from making API calls successfully. While it may seem confusing at first, understanding and fixing CORS issues is straightforward once you know how it works.

In this article, we will explore what CORS is, why this error happens, and how to fix CORS policy blocked errors in both frontend and backend with practical examples.

What is CORS?

CORS stands for Cross-Origin Resource Sharing. It is a security feature implemented by browsers to restrict web pages from making requests to a different domain than the one that served the webpage.

Understanding Origin

An origin is defined by:

  • Protocol (http or https)

  • Domain (example.com)

  • Port (3000, 5000, etc.)

If any of these differ, it is considered a different origin.

Example

  • Frontend: http://localhost:3000

  • Backend: http://localhost:5000

This is a cross-origin request, so CORS rules apply.

What is the CORS Policy Blocked Error?

When a frontend application tries to call an API from a different origin, the browser checks if the server allows it.

If the server does not include proper CORS headers, the browser blocks the request.

Common Error Message

Access to fetch at 'http://localhost:5000/api/data' from origin 'http://localhost:3000' has been blocked by CORS policy

Why This Happens

  • Server does not allow the origin

  • Missing CORS headers

  • Incorrect HTTP methods or headers

How CORS Works (Request Flow)

  1. Browser sends request to server

  2. Server responds with headers

  3. Browser checks CORS headers

  4. If allowed → request succeeds

  5. If not allowed → request blocked

This process ensures security in web applications.

Types of CORS Requests

Simple Requests

  • GET, POST (basic)

  • No custom headers

Preflight Requests

  • Uses OPTIONS method

  • Sent before actual request

  • Checks permissions

Understanding this helps in debugging issues.

Fixing CORS Error in Backend (Recommended Approach)

The correct way to fix CORS issues is from the backend.

Fix CORS in ASP.NET Core Backend

builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowFrontend",
        policy =>
        {
            policy.WithOrigins("http://localhost:3000")
                  .AllowAnyHeader()
                  .AllowAnyMethod();
        });
});

app.UseCors("AllowFrontend");

Code Explanation

  • 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.

Membership not found