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.
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
Quick triage — pick your path
Get started
Choose the option that matches what you see. You can jump straight to that section.
- Follow this guide Work through the full procedure from confirming the error to fixing headers.
- Confirm the CORS error You need to verify it is a CORS block and capture Origin and URL.
- Fix server headers You control the server and need to add or fix CORS headers.
- Use a proxy You control only the client and cannot change the API server.
- When to contact API owner The API is third-party and you cannot run a proxy.
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-Originwith the exact Origin value (e.g.https://example.com) or*for public APIs. For requests with credentials, use the exact Origin and addAccess-Control-Allow-Credentials: true. - For preflight: respond to OPTIONS with
Access-Control-Allow-Origin,Access-Control-Allow-Methods(e.g. GET, POST), andAccess-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-Originmatching 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.
- Confirm CORS error Check console and Network for CORS policy error; note Origin and blocked URL.
- Fix Access-Control-Allow-Origin Add or fix the header on the server to match the request Origin.
- Handle preflight Respond to OPTIONS with Allow-Origin, Allow-Methods, Allow-Headers.
- Use proxy Run a same-origin proxy when you cannot change the server.
- 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.
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.
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.
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).
Check the actual error
If it is not CORS, the error may be network, 404, or auth.
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.