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