Home / Guides

How to fix CORS errors on localhost in Chrome

You're running your front end on http://localhost:3000, it calls a real API, and the console says "has been blocked by CORS policy". The proper fix is on the server, but when you just need to keep working, you can add the missing response headers in the browser.

By RJ Macarthy · 3 November 2026

Why the error happens

Browsers only let a page read a response from another origin if that response includes an Access-Control-Allow-Origin header naming your origin. Your local app at localhost:3000 is a different origin from api.example.com, and the API doesn't list it, so Chrome blocks the response.

Fix it with ProperHeader

Changing response headers is a Pro feature.

1. Click the ProperHeader icon, then Full editor.
2. Under Quick start, click Fix CORS for localhost. It adds four response headers:

   Access-Control-Allow-Origin: http://localhost:3000
   Access-Control-Allow-Credentials: true
   Access-Control-Allow-Headers: Content-Type, Authorization
   Access-Control-Allow-Methods: GET, POST, PUT, PATCH, DELETE, OPTIONS

3. Change http://localhost:3000 to your dev server's exact origin (scheme, host and port).
4. Under Filters → Only on URLs matching, add the API, for example https://api.example.com/*, so you're not changing every site.
5. Allow ProperHeader on the API's site when it asks, then reload your app.

Common gotchas

• Credentials and * don't mix. If your requests send cookies or use credentials: 'include', the browser rejects Access-Control-Allow-Origin: *. Use your exact origin, as the recipe does.
• Custom request headers. If you send headers such as X-Api-Key, add them to Access-Control-Allow-Headers.
• Preflight errors. For non-simple requests the browser sends an OPTIONS request first. Adding headers fixes a preflight that's missing headers, but if the server answers OPTIONS with an error status (like 404 or 405), changing headers can't change that status. Then you need a dev proxy or a server change.
• Reading response headers in JavaScript. To read custom response headers from fetch, add Access-Control-Expose-Headers.

Other ways to fix it

• Fix the server: the right long-term answer. Add your dev origin to the API's allowed origins.
• Use your dev server's proxy: Vite, webpack and Next.js can proxy /api to the real API so requests are same-origin.
• Launch Chrome with web security disabled: it works, but it turns off protections for everything in that profile. A header rule scoped to one API is much safer.

Questions