How to Fix CORS Error in ASP.NET Core API (2026 Guide)

By /

Introduction

CORS error in ASP.NET Core API is one of the most common problems developers face when they connect a backend API with a frontend application such as Angular, React, or Vue.

When the browser blocks an API call and shows messages like “Blocked by CORS policy” or “No ‘Access-Control-Allow-Origin’ header is present”, developers often assume something is broken in the API. In reality, the browser enforces a security rule that the server must handle correctly.

This guide explains what CORS is, why CORS errors occur, and how to fix CORS error in ASP.NET Core API step by step using clean, production-ready configuration for 2026.

What Is CORS?

CORS (Cross-Origin Resource Sharing) is a browser security mechanism that controls how a web application accesses resources from a different origin.

An origin consists of:

  • Protocol (http or https)
  • Domain
  • Port

If any of these differ, the browser treats the request as cross-origin.

Example

  • Frontend: http://localhost:4200
  • API: https://localhost:5001

Because the origins differ, the browser blocks the request unless the API explicitly allows it.

Why Browsers Enforce CORS

Browsers enforce CORS to prevent:

  • Malicious websites from calling private APIs
  • Unauthorized data access
  • Credential misuse across domains

CORS protects users, not servers. That is why tools like Postman do not show CORS errors.

Common CORS Error Messages

Developers commonly see the following errors:

  • Blocked by CORS policy
  • No 'Access-Control-Allow-Origin' header is present
  • Response to preflight request doesn't pass access control check
  • CORS policy execution failed

Each message indicates that the API did not return the required CORS headers.

Why CORS Errors Occur in ASP.NET Core

CORS errors usually happen due to one or more of the following reasons:

  • The API does not enable CORS
  • The middleware order is incorrect
  • The allowed origin does not match the frontend URL
  • The server blocks preflight OPTIONS requests
  • The API uses credentials without proper configuration

How to Fix CORS Error in ASP.NET Core API

Follow these steps carefully to fix CORS issues correctly.

Step 1: Enable CORS Services

Open Program.cs and register the CORS service.

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

This configuration tells ASP.NET Core which frontend application can access the API.

Step 2: Add CORS Middleware in the Correct Order

Middleware order plays a critical role in ASP.NET Core.

app.UseHttpsRedirection();

app.UseCors("AllowFrontend");

app.UseAuthentication();
app.UseAuthorization();

app.MapControllers();

✔ Place UseCors() before authentication and authorization
❌ Placing it later causes CORS errors even when the configuration is correct

Correct middleware order automatically fixes most preflight issues.

Step 3: Allow Multiple Origins (If Needed)

If your API serves multiple frontend applications, explicitly list them.

policy.WithOrigins(
    "http://localhost:4200",
    "https://yourfrontend.com"
);

Avoid wildcard origins in production.

Step 4: Allow Credentials (When Required)

If your API uses cookies or authorization headers, enable credentials carefully.

policy
    .WithOrigins("http://localhost:4200")
    .AllowAnyHeader()
    .AllowAnyMethod()
    .AllowCredentials();

⚠️ Important rule:
Do not combine AllowAnyOrigin() with AllowCredentials().

Step 5: Handle Preflight (OPTIONS) Requests Correctly

Browsers send an OPTIONS request before the actual API call.

To avoid CORS failures:

  • The server does not block OPTIONS requests
  • OPTIONS requests do not require authorization
  • CORS middleware runs early in the pipeline

Most preflight issues disappear when middleware order is correct.

Apply CORS to Specific Controllers (Optional)

Instead of applying CORS globally, you can apply it to selected controllers.

[EnableCors("AllowFrontend")]
[ApiController]
[Route("api/[controller]")]
public class ProductsController : ControllerBase
{
}

Use this approach only when:

  • Some APIs must remain private
  • Others require cross-origin access

Why CORS Works in Postman but Fails in Browsers

Postman and similar tools do not enforce CORS rules.

Browsers enforce CORS to protect users. That is why API calls succeed in Postman but fail in Chrome or Edge.

CORS Headers Explained in Simple Terms

When a browser makes a cross-origin request, it expects specific CORS response headers from the server. These headers tell the browser whether it should allow or block the response.

The most important CORS headers are:

  • Access-Control-Allow-Origin
    This header defines which origins can access the API. If the frontend origin does not match this value, the browser blocks the request immediately.
  • Access-Control-Allow-Methods
    This header specifies which HTTP methods (GET, POST, PUT, DELETE, etc.) the API allows for cross-origin requests.
  • Access-Control-Allow-Headers
    This header defines which request headers the client can send, such as Authorization or Content-Type.
  • Access-Control-Allow-Credentials
    This header allows the browser to send cookies or authentication information along with the request.

When the server returns these headers correctly, the browser allows the API call and exposes the response to the frontend application.

Development vs Production CORS Configuration

CORS configuration often differs between development and production environments.

During development, developers usually allow broader access to speed up testing and integration. This approach helps frontend and backend teams work independently without frequent configuration changes.

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

This setup works well for local development but reduces security.

In production, APIs should allow only trusted frontend origins. A strict configuration prevents unauthorized websites from accessing sensitive endpoints.

policy
    .WithOrigins("https://yourfrontend.com")
    .AllowAnyHeader()
    .AllowAnyMethod();

Production CORS configuration should always be explicit, limited, and reviewed whenever frontend URLs change. This approach balances security and functionality.

Real-World Example: Angular App Calling ASP.NET Core API

Consider an Angular application running on http://localhost:4200 that needs to call an ASP.NET Core API hosted on https://localhost:5001.

Without proper CORS configuration, the browser blocks the request even though the API works correctly. The frontend receives a CORS error before it can read the API response.

After enabling CORS and allowing http://localhost:4200 as a trusted origin, the browser successfully completes the request. The API returns the expected data, and the frontend application consumes it without errors.

This example shows that CORS issues do not indicate broken APIs. Instead, they highlight missing or incorrect server-side configuration.

CORS with JWT Authentication

Many modern ASP.NET Core APIs use JWT (JSON Web Token) authentication, which often leads to confusion when CORS errors appear.

CORS runs before authentication and authorization in the request pipeline. If the browser blocks the request due to missing CORS headers, the API never reaches JWT validation.

When using JWT:

  • The browser sends the Authorization header
  • The API must allow this header using AllowAnyHeader() or explicit configuration
  • Preflight OPTIONS requests must succeed without requiring authentication

Correct CORS configuration ensures that JWT tokens reach the API correctly. Once the browser allows the request, ASP.NET Core validates the token and applies authorization rules.

Why CORS Works in Postman but Not in Browsers

Postman and similar tools:

  • Do not enforce CORS
  • Send requests directly to the server

Browsers:

  • Enforce CORS rules
  • Block responses without proper headers

This difference explains why APIs work in Postman but fail in Chrome or Edge.

How to Verify CORS Fix Using Browser DevTools

After configuring CORS, always verify the fix using browser developer tools.

Open the browser DevTools, go to the Network tab, and trigger the API request from the frontend application. Look for an OPTIONS request before the actual API call.

Click the OPTIONS request and inspect the Response Headers section. You should see headers like Access-Control-Allow-Origin and Access-Control-Allow-Methods.

If the browser receives these headers correctly, the subsequent API request succeeds. This verification step helps you confirm that CORS configuration works as expected.

Debugging CORS Errors (Practical Checklist)

Use this checklist when debugging CORS issues:

✔ Confirm frontend URL matches allowed origin
✔ Check middleware order
✔ Ensure OPTIONS requests are not blocked
✔ Verify HTTPS vs HTTP
✔ Restart API after configuration changes
✔ Inspect response headers in browser DevTools

This checklist solves most real-world CORS problems.

Common Mistakes That Cause CORS Errors

Avoid these common mistakes:

❌ Forgetting to call AddCors()
❌ Using the wrong frontend URL (http vs https)
❌ Placing UseCors() after authorization
❌ Blocking OPTIONS requests
❌ Using AllowAnyOrigin() in production

Best Practices for CORS in Production (2026)

Follow these best practices:

✔ Allow only trusted origins
✔ Apply CORS globally unless required otherwise
✔ Avoid wildcard origins
✔ Review CORS rules when frontend URLs change
✔ Keep configuration simple and readable

When You Should Not Enable CORS

Not every API requires CORS configuration.

You should avoid enabling CORS when:

  • The API is used only for server-to-server communication
  • Background jobs or scheduled tasks consume the API
  • Internal services communicate within the same network

In these cases, CORS adds unnecessary complexity. Enable CORS only when browser-based frontend applications need to access the API.

Frequently Asked Questions (FAQ)

❓ Why does my API still show CORS errors after configuration?

Incorrect middleware order or a mismatched frontend URL usually causes this issue.

❓ Should I disable CORS to fix errors?

No. Disabling CORS creates security risks and should never happen in production.

❓ Where should I configure CORS in ASP.NET Core?

Configure CORS in Program.cs using services and middleware.

❓ Does CORS affect same-origin requests?

No. CORS applies only to cross-origin requests.

❓ Is CORS required for server-to-server communication?

No. CORS applies only to browser-based requests.

Final Thoughts

CORS errors in ASP.NET Core API are security features, not bugs.

When you:

  • Configure CORS correctly
  • Maintain proper middleware order
  • Allow only required origins

You eliminate CORS issues permanently and keep your API secure.

Read our detailed guides on Request Pipeline – Complete Execution & Middleware vs Filters in detail.

Explore more important concepts here…

1 thought on “How to Fix CORS Error in ASP.NET Core API (2026 Guide)”

  1. Pingback: Entity Framework Migration Failed – Common Reasons and Fixes

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top