How to modify response headers in Chrome

Chrome has no built-in way to change response headers. Headerbench lets you set or remove them for the sites you pick, for example to allow CORS from your dev server or to drop a Content-Security-Policy while debugging.

Allow CORS from localhost

1. Install Headerbench and create a profile named Local CORS.
2. Open Response headers and apply the Allow CORS preset. It adds Access-Control-Allow-Origin, -Methods, -Headers and -Credentials.
3. Change Access-Control-Allow-Origin from * to http://localhost:3000. Browsers ignore * when the request sends cookies, which is why the preset’s Credentials row needs a real origin.
4. If your requests send an Authorization header, set Access-Control-Allow-Headers to Authorization, Content-Type; * does not cover Authorization.
5. On Filters, add the domain api.example.com and the type fetch/XHR, so only API calls change.
6. Open your app, turn the profile on in the popup and allow access to api.example.com and your app’s page when Chrome asks.
7. Reload your app. The popup’s Applied on this tab lists the response rule against each matching request.

Remove a header

Add a response row with the operation remove, or apply the Remove Content Security Policy preset, which removes Content-Security-Policy and Content-Security-Policy-Report-Only. A policy set in a <meta> tag inside the page still applies.

Why this works on every request

Headerbench hands rules to Chrome’s declarativeNetRequest engine, which edits headers before the page sees the response. It applies to fetch and XHR responses as well as page loads, and nothing runs inside the page. DevTools may still show the original headers; Applied on this tab shows what Chrome changed.