Dev Tool

CORS Errors — What They Mean and How to Fix Them

Name: CORS Errors — How to Fix Them (with Examples)
Author: AllOmnitools Editorial Team

Step-by-step solutions for Cross-Origin Resource Sharing problems — server configs for Express, Next.js, Apache, Nginx

AllOmnitools Editorial Team

Browser Blocked — Client Side

Client No 'Access-Control-Allow-Origin' header

Access to fetch at 'https://api.example.com/data' from origin 'https://myapp.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

The server's response does not include the CORS header that authorizes your origin. The browser blocks the response.

If you control the server: Add Access-Control-Allow-Origin header to the response. See server examples below.

If you DON'T control the server: Options:

Use a backend proxy (your server calls the API, adds CORS headers, your frontend calls your server)
Ask the API provider to enable CORS for your origin
For development only: disable browser CORS checks (not production-safe)

Client Response to preflight request doesn't pass access control

Access to XMLHttpRequest at 'https://api.example.com' from origin 'https://myapp.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

The browser sent an OPTIONS preflight request (because your request has custom headers or non-simple method). The server responded with non-200 status or missing CORS headers for OPTIONS.

1Ensure your server handles OPTIONS requests for that endpoint:

// Express example — before your route handler
app.options('/api/data', cors());  // preflight responder

2OR configure CORS middleware to handle preflight automatically (see below).

Tip: Preflight happens for: methods other than GET/HEAD/POST, or custom headers (Authorization, X-), or Content-Type other than application/x-www-form-urlencoded, multipart/form-data, text/plain.

Client Credentials flag is 'true', but 'Access-Control-Allow-Credentials' is ''

XMLHttpRequest cannot load 'https://api.example.com'. Credentials flag is 'true', but 'Access-Control-Allow-Credentials' header is ''. Must be 'true' to allow credentials.

Your frontend sets withCredentials: true or credentials: 'include' (cookies, auth headers), but the server did not include Access-Control-Allow-Credentials: true in its response.

1On the server, add this header:

Access-Control-Allow-Credentials: true

2Important: When credentials are true, Access-Control-Allow-Origin cannot be *. You must echo the specific origin:

Access-Control-Allow-Origin: https://myapp.com

Warning: Never set Access-Control-Allow-Origin: * with Access-Control-Allow-Credentials: true. It's invalid and will be rejected by browsers.

Client Request header field X- is not allowed

Access to fetch at 'https://api.example.com' from origin 'https://myapp.com' has been blocked by CORS policy: Request header field x-custom-header is not allowed by Access-Control-Allow-Headers.

Your request includes a header that the server hasn't explicitly allowed in its Access-Control-Allow-Headers response header.

1On server, add the required header name to Access-Control-Allow-Headers:

Access-Control-Allow-Headers: Authorization, X-Custom-Header, Content-Type

Tip: Common headers that trigger preflight: Authorization, X-Requested-With, X-CSRF-Token. Access-Control-Allow-Headers: * is valid in Fetch spec but not universally supported; list explicitly for compatibility.

Client Method PUT/PATCH/DELETE is not allowed

Access to XMLHttpRequest at '...' from origin '...' has been blocked by CORS policy: Method PUT is not allowed by Access-Control-Allow-Methods.

Your request uses a method not listed in the server's Access-Control-Allow-Methods header in the preflight response.

1On server, include the method in Access-Control-Allow-Methods:

Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS, PATCH

Info: OPTIONS must be allowed because the browser sends an OPTIONS preflight request before the actual method.

Server-Side Fixes

Server Dynamic origin — allow multiple domains

You want to allow several specific origins (not *). Echo back the Origin request header if it's in your whitelist.

// Express.js
const allowed = ["https://myapp.com", "https://admin.myapp.com"];
app.use(cors({
  origin: (origin, callback) => {
    if (!origin || allowed.includes(origin)) {
      callback(null, true);
    } else {
      callback(new Error('Not allowed by CORS'));
    }
  }
}));

// Next.js — middleware.js
export function middleware(request) {
  const response = NextResponse.next();
  const origin = request.headers.get('origin');
  const allowed = ["https://myapp.com", "https://app.myapp.com"];
  if (allowed.includes(origin)) {
    response.headers.set('Access-Control-Allow-Origin', origin);
    response.headers.set('Access-Control-Allow-Credentials', 'true');
  }
  return response;
}

Tip: !origin check allows same-origin requests (mobile apps, Postman) that send no Origin header.

Server Apache .htaccess CORS configuration

# .htaccess in document root
<IfModule mod_headers.c>
  Header always set Access-Control-Allow-Origin "https://myapp.com"
  Header always set Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS"
  Header always set Access-Control-Allow-Headers "Authorization, Content-Type"
  Header always set Access-Control-Allow-Credentials "true"
</IfModule>

# Handle OPTIONS preflight
RewriteEngine On
RewriteCond %{REQUEST_METHOD} OPTIONS
RewriteRule ^(.*)$ $1 [R=200,L]

Tip: Requires mod_headers enabled (a2enmod headers). For dynamic origin, need mod_setenvif or server-side scripting (PHP/Python).

Server Nginx CORS configuration

# nginx.conf or site config
location /api/ {
  add_header 'Access-Control-Allow-Origin' 'https://myapp.com' always;
  add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS' always;
  add_header 'Access-Control-Allow-Headers' 'Authorization, Content-Type' always;
  add_header 'Access-Control-Allow-Credentials' 'true' always;

  # Preflight
  if ($request_method = 'OPTIONS') {
    add_header 'Access-Control-Max-Age' 1728000;
    add_header 'Content-Type' 'text/plain; charset=utf-8';
    add_header 'Content-Length' 0;
    return 204;
  }
}

Tip: always ensures headers are set even on error responses. Access-Control-Max-Age (seconds) caches preflight in browser. 1728000 = 20 days.

Server Cloudflare Worker CORS

export default {
  async fetch(request, env, ctx) {
    const response = await fetch(request);
    const newHeaders = new Headers(response.headers);
    newHeaders.set('Access-Control-Allow-Origin', 'https://myapp.com');
    newHeaders.set('Access-Control-Allow-Credentials', 'true');
    return new Response(response.body, {
      status: response.status,
      headers: newHeaders
    });
  }
};

Tip: Cloudflare Workers modify responses mid-flight. Useful for adding CORS to third-party APIs you don't control. Deploy as a route in your Worker.

Common Pitfalls

The Wildcard — Credentials Trap

[INVALID]:

Access-Control-Allow-Origin: *
Access-Control-Allow-Credentials: true

Forbidden — browsers reject this combination.

[VALID]:

Access-Control-Allow-Origin: https://myapp.com
Access-Control-Allow-Credentials: true

Specific origin required when credentials = true.

Localhost Origins

Development:
Allow http://localhost:3000, http://127.0.0.1:5173, etc.
Access-Control-Allow-Origin: http://localhost:3000

Production:
Switch to your real domain: https://myapp.com
Use env variables to differ dev/prod config.

Pitfall CORS headers not preserved on redirects

Request to endpoint returns 301/302 redirect. Browser follows redirect but CORS headers from the first response are not applied to the final response.

CORS validation is per-response. A redirect response must itself have the appropriate Access-Control-Allow-Origin header if it's cross-origin, but usually redirects don't include CORS headers.

1Update the client to call the final URL directly (avoid redirect).

2Or ensure the redirect response includes Access-Control-Allow-Origin (rarely practical).

Tip: Best practice: don't rely on redirects for cross-origin API endpoints. Use canonical URLs.

CORS: Why It Exists and How to Fix It

CORS (Cross-Origin Resource Sharing) is a browser security mechanism that blocks JavaScript from making requests to a different origin than the page it's running on. It's not a bug — it's the browser enforcing the Same-Origin Policy to prevent malicious scripts on one site from reading data from another. The fix always lives on the server, not the client: the server needs to return the right Access-Control-Allow-Origin header.

The credentials trap catches a lot of developers: you cannot use Access-Control-Allow-Origin: * when sending cookies or Authorization headers. The browser blocks it. The correct approach is to echo back the specific requesting origin dynamically and set Access-Control-Allow-Credentials: true. This guide shows the exact headers and server-side snippets for the most common frameworks.

Many CORS problems are best solved at the CDN layer. Cloudflare Workers and AWS CloudFront Functions can inject the correct headers before a request even reaches your application server — centralizing policy management and eliminating the issue for every route at once.

Complete Developer Toolkit

CORS errors are fundamentally about your browser blocking cross-origin API requests. While fixing them requires server-side changes, diagnosing them involves several other tools. Use our DNS lookup to confirm both your frontend and API domains are resolving to the correct servers — a misconfigured DNS can make requests go to unexpected origins. Our SSL expiry checker verifies your API's HTTPS certificate is valid, since browsers also block requests to origins with invalid certificates, producing errors that can look like CORS issues.

Our API response simulator lets you mock API responses locally so you can test your frontend without hitting a CORS-restricted endpoint during development. When your API returns JSON, use our JSON formatter to validate the response structure. Our URL encoder encodes origin URLs and query parameters correctly. The JWT decoder inspects Authorization tokens your API requires — a misconfigured auth header is a common trigger for CORS preflight failures. Our regex tester helps write patterns to validate the origin whitelist you configure on your server. The Core Web Vitals guide explains how CORS-blocked resources indirectly affect LCP scores.

FAQ

What exactly is a CORS "Preflight" request?

A preflight request is an automatic OPTIONS request sent by the browser before the actual request. It checks with the server if the cross-origin call is safe and allowed based on the method and headers used.

Why can't I use a wildcard (*) with credentials?

How do I fix CORS errors in local development?

Is my data safe when using this guide?

Does CORS protect my server from all attacks?

Can I fix CORS errors without changing the server?

Learn More

CORS — WikipediaHow Cross-Origin Resource Sharing works CORS — MDN Web DocsComplete CORS reference and debugging guide