How to Set the Host Header in Fetch (JavaScript)

The Host header is a forbidden header name in the browser, which means JavaScript cannot set it using fetch() or XMLHttpRequest. If you need to control the Host header for API integrations or web scraping, the solution is to route the request through a server-side proxy that can set the header for you.

Quick Solution

Use Corsfix to set the Host header from your frontend code. Pass the header you want inside x-corsfix-headers, and Corsfix will apply it server-side before forwarding your request.

fetch("https://proxy.corsfix.com/?https://api.example.com/data", {
  headers: {
    "x-corsfix-headers": JSON.stringify({
      Host: "api.example.com",
    }),
  },
})
  .then((response) => response.json())
  .then((data) => console.log(data));

Corsfix receives your request, sets the Host header to the value you specified, and forwards it to the target URL. The response is then returned to your browser with the proper CORS headers.

For local development, this works instantly without registration. For live websites, set up your domain (takes 30 seconds).

Why Browsers Block the Host Header

The Host header is part of the browser's forbidden header names list. This is a set of headers that the browser manages automatically and doesn't allow JavaScript to modify. The Host header tells the server which domain the request is intended for, and browsers set it based on the URL you're requesting.

This is purely a browser-level restriction. In server-side environments like Node.js, you have full control over all headers including Host:

// Node.js — this works fine
const response = await fetch("https://api.example.com/data", {
  headers: {
    Host: "custom-host.example.com",
  },
});

// Browser — this is silently ignored
fetch("https://api.example.com/data", {
  headers: {
    Host: "custom-host.example.com", // Browser ignores this
  },
});

In the browser, the Host header you set is silently ignored and the browser uses the hostname from the URL instead. That's where a proxy comes in.

How a Proxy Solves the Problem

Since browsers won't let you set the Host header directly, the workaround is to let a proxy do it for you.

1. Your browser sends a request to Corsfix with the target URL and the headers you want to override inside x-corsfix-headers.
2. Corsfix reads the override instructions, sets the actual Host header on the outbound request, and forwards it to the target API.
3. The target API receives the request with the Host header value you specified.

When Do You Need to Set the Host Header?

There are a few real-world scenarios where controlling the Host header matters:

• Virtual hosting — the target server hosts multiple domains on the same IP address and uses the Host header to route requests to the correct site.
• API gateways — some API gateways validate the Host header and reject requests where it doesn't match the expected value.
• Web scraping — certain websites check the Host header as part of their bot-detection logic and block requests with unexpected values.
• SNI and TLS routing — servers behind load balancers may use the Host header to determine which TLS certificate to serve.

Best Practices

Only Override What You Need

Don't override the Host header on every request. Only use it when the target API specifically requires a particular Host value. In most cases, the default behavior (using the hostname from the URL) is correct.

Handle Errors Gracefully

When the Host header doesn't match what the server expects, you may get unexpected errors:

const response = await fetch(
  "https://proxy.corsfix.com/?https://api.example.com/data",
  {
    headers: {
      "x-corsfix-headers": JSON.stringify({
        Host: "custom-host.example.com",
      }),
    },
  }
);

if (!response.ok) {
  // Common errors when Host is misconfigured:
  // 403 Forbidden — server rejected the Host value
  // 421 Misdirected Request — Host doesn't match the server
  // 502 Bad Gateway — upstream server couldn't route the request
  console.error(`Request failed: ${response.status}`);
}

Conclusion

Use a server-side proxy like Corsfix to set the Host header in JavaScript fetch. Since browsers restrict the Host header as a forbidden header name, a proxy is the simplest way to override it without setting up your own backend.

Corsfix handles the Host header override (along with other forbidden headers) server-side, so you can focus on building your app instead of managing proxy infrastructure. It's free to get started, and you only need to upgrade when you go to production.