Fix: Refused to set unsafe header Origin (XMLHttpRequest)

You tried to set the Origin header on a request and the browser logged:

Refused to set unsafe header "Origin"

The header was silently dropped. This is by design, and the fix is not on the client.

Why the browser refuses

Origin is a forbidden header name. The browser sets it automatically to reflect the true origin of the page making the request, and the entire CORS security model depends on the server being able to trust that value.

If JavaScript could rewrite Origin, any page could claim to be any site — and the same-origin policy would protect nothing. So the browser ignores your attempt:

const xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.example.com/data");
xhr.setRequestHeader("Origin", "https://example.com"); // silently ignored + warning
xhr.send();

It's a warning, not a failure

The message is logged at warning level. The request still goes out — just with the browser's own correct Origin, not yours. So if your request is actually failing, this warning is a red herring: the real problem is almost always a missing or mismatched CORS response header on the server.

The real fix: configure CORS on the server

Remove the setRequestHeader("Origin", …) call entirely, then have the server return the appropriate CORS headers.

Access-Control-Allow-Origin: https://your-site.com

Prefer naming the specific origin over *. A wildcard cannot be combined with credentials, and it allows every site on the internet to call your API from the browser.

Concrete examples:

// Express
app.use((req, res, next) => {
  res.header("Access-Control-Allow-Origin", "https://your-site.com");
  res.header("Access-Control-Allow-Methods", "GET,POST,PUT,DELETE");
  res.header("Access-Control-Allow-Headers", "Content-Type, Authorization");
  next();
});

If the request uses a non-simple method or custom headers, the browser first sends a preflight OPTIONS request — the server must answer that too, with the Allow-Methods and Allow-Headers above.

For cookies or auth:

Access-Control-Allow-Origin: https://your-site.com   # must be specific, not *
Access-Control-Allow-Credentials: true

Local development shortcut

During development, avoid CORS entirely with a dev-server proxy so the browser sees a same-origin request:

// vite.config.js
export default {
  server: {
    proxy: { "/api": "https://api.example.com" }
  }
}

Angular has proxy.conf.json; webpack-dev-server has devServer.proxy. No header forging required.

The full forbidden-header list

You can't set any of these from browser JavaScript — the browser owns them:

Origin, Host, Referer, Cookie, Connection, Content-Length, Date, DNT, Keep-Alive, TE, Trailer, Transfer-Encoding, Upgrade, Via, and anything starting with Proxy- or Sec-.

When you genuinely need to send a custom Origin

Only non-browser clients can do this — curl, Node's http/fetch on the server, Postman — because they aren't bound by the same-origin policy:

curl -H "Origin: https://example.com" https://api.example.com/data

If you're in a browser and think you need to spoof Origin, you almost certainly need a server-side CORS change or a proxy instead.