Fix a CORS that blocks request

We'll confirm the Origin and blocked URL, fix Access-Control-Allow-Origin and preflight headers on the server—or use a proxy when you cannot change the server.

Category
Troubleshooting · Home maintenance
Time
10–30 min
Last reviewed
What you'll need
  • Access to the server that serves the API (or a proxy you can deploy)
  • Browser DevTools to inspect the request and response headers

Step-by-step diagnostic

Step 1 of 5
Show full guide

Steps

Goal: Confirm the CORS error, fix the server response headers, or use a proxy when you cannot change the server.

  • Open DevTools (F12) > Network and Console. Reproduce the request.
  • Good: You see a CORS policy error. Note the Origin and blocked URL. Proceed to Confirm the CORS error.
  • Bad: Different error—check the actual message and response status.

Confirm the CORS error

Goal: Capture the Origin and blocked URL so you know what the server must allow.

  • In Network, click the failed request. Check Response Headers for Access-Control-Allow-Origin. It will be missing or not match your Origin.
  • Note your Origin (scheme, host, port of the page) and the blocked URL.
  • If the request uses custom headers or non-GET, check for an OPTIONS preflight request. The preflight must return 200 with CORS headers.
  • Good: You have Origin and blocked URL. Proceed to Fix server headers or Proxy path based on whether you control the server.

Fix server headers

Goal: Add or fix Access-Control-Allow-Origin and preflight headers on the server.

  • Add Access-Control-Allow-Origin with the exact Origin value (e.g. https://example.com) or * for public APIs. For requests with credentials, use the exact Origin and add Access-Control-Allow-Credentials: true.
  • For preflight: respond to OPTIONS with Access-Control-Allow-Origin, Access-Control-Allow-Methods (e.g. GET, POST), and Access-Control-Allow-Headers (e.g. Content-Type, Authorization).
  • Restart the server and retest. You should see the headers in the response and the request succeed.
  • Good: Request succeeds. Bad: Still blocked—verify the header value matches the Origin exactly (no trailing slash, correct scheme).

Proxy path

Goal: Use a same-origin proxy when you cannot change the API server.

  • Deploy a proxy on your origin that forwards requests to the API and adds CORS headers. The browser fetches from your proxy; the proxy fetches from the API.
  • Use a serverless function, a small backend, or a reverse proxy (e.g. Nginx) that adds the headers.
  • Good: Request succeeds. Bad: Cannot deploy a proxy—contact the API owner with your Origin and ask them to add CORS.

When to get help

  • The API is third-party and you cannot run a proxy. Contact the API owner with your Origin and ask them to add it to Access-Control-Allow-Origin.
  • You have added the headers but the request still fails. Double-check the Origin value (exact match, no trailing slash) and that preflight (OPTIONS) is handled if needed.

Verification

  • The browser console shows no CORS error.
  • The Network tab shows the response with Access-Control-Allow-Origin matching your Origin (or *).
  • The request completes and your app receives the data.

Escalation ladder

Work from the device outward. Stop when the problem is fixed.

  1. Confirm CORS error Check console and Network for CORS policy error; note Origin and blocked URL.
  2. Fix Access-Control-Allow-Origin Add or fix the header on the server to match the request Origin.
  3. Handle preflight Respond to OPTIONS with Allow-Origin, Allow-Methods, Allow-Headers.
  4. Use proxy Run a same-origin proxy when you cannot change the server.
  5. Contact API owner Ask the API owner to add your Origin to CORS headers.

What to capture if you need help

Before calling support or posting for help, have these ready. It speeds everything up.

  • Origin (scheme, host, port) of the page
  • Blocked URL (API endpoint)
  • Whether OPTIONS preflight is used
  • Server/framework (Express, Nginx, etc.)
  • Steps already tried

Do you see a CORS error in the browser console?

CORS errors mention "Access-Control-Allow-Origin" or "CORS policy". Check DevTools > Console and Network.

Open DevTools (F12) > Console and Network. Reproduce the request. Look for "CORS policy" or "Access-Control-Allow-Origin" in the console. Good: you see a CORS error. Bad: different error—check the actual message.

You can change your answer later.

Do you control the server that serves the API?

If you control the server, add or fix CORS headers. If not, use a proxy or contact the API owner.

Determine if you can change the backend that responds to the API request. Good: you control the server. Bad: third-party API—you need a proxy or must contact the owner.

You can change your answer later.

Add Access-Control-Allow-Origin and preflight headers

The server must send Access-Control-Allow-Origin matching the request Origin. For preflight, respond to OPTIONS with Allow-Methods and Allow-Headers.

Add Access-Control-Allow-Origin with the exact Origin (or * for public APIs). For preflight, handle OPTIONS and add Allow-Methods and Allow-Headers. Restart the server and retest. Good: request succeeds. Bad: still blocked—check that the header value matches exactly.

Use a same-origin proxy

A proxy on your origin forwards requests to the API and adds CORS headers. The browser talks to your proxy (same origin).

Deploy a proxy on your same-origin that forwards requests to the API and adds Access-Control-Allow-Origin. The browser fetches from your proxy. Good: request succeeds. Bad: cannot deploy proxy—contact the API owner.

Check the actual error

If it is not CORS, the error may be network, 404, or auth.

Read the console and Network response. If it is 404, 401, or network error, fix that instead. CORS errors specifically mention "Access-Control-Allow-Origin" or "CORS policy".

Reviewed by Blackbox Atlas

Frequently asked questions

What causes a CORS error?
The browser sends an Origin header with cross-origin requests. The server must respond with Access-Control-Allow-Origin that includes that origin (or *). If the header is missing or does not match, the browser blocks the response.
Can I fix CORS from the client side?
No. CORS is enforced by the browser based on server response headers. You cannot bypass it with client-side code. If you control the server, fix the headers there. If not, use a same-origin proxy or ask the API owner to add CORS.
Why does it work in Postman but not in the browser?
Postman does not enforce CORS; it is a browser security feature. The browser blocks responses when the server does not send the correct Access-Control-Allow-Origin header.

Rate this guide

Was this helpful?

Thanks for your feedback.

Continue to