How to Set the Host Header in Fetch (JavaScript)

Source: Dev.to

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. Browsers manage these headers automatically and do not allow JavaScript to modify them. The Host header tells the server which domain the request is intended for, and browsers set it based on the URL you request.

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",
  },
});

In the browser the header is silently ignored:

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

The browser always uses the hostname from the URL, which is why a proxy is needed.

How a Proxy Solves the Problem

Since browsers won’t let you set the Host header directly, a proxy can 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?

Real‑world scenarios where controlling the Host header matters:

• Virtual hosting – the server hosts multiple domains on the same IP and uses Host to route requests.
• API gateways – some gateways validate the Host header and reject mismatched values.
• Web scraping – certain sites check Host as part of bot‑detection logic.
• SNI and TLS routing – load balancers may use Host to select the correct TLS certificate.

Best Practices

Only Override What You Need

Do not override the Host header on every request. Use it only when the target API explicitly requires a specific Host value. In most cases the default behavior (using the hostname from the URL) is correct.

Handle Errors Gracefully

If the Host header doesn’t match what the server expects, you may receive errors such as:

• 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.

Example error handling:

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) {
  console.error(`Request failed: ${response.status}`);
}

Conclusion

Use a server‑side proxy like Corsfix to set the Host header in JavaScript fetch. Because browsers restrict the Host header as a forbidden header name, a proxy is the simplest way to override it without building your own backend. Corsfix handles the Host header override (along with other forbidden headers) server‑side, letting you focus on your app instead of proxy infrastructure. It’s free to get started, with optional upgrades for production use.