Fetch (JavaScript)에서 Host Header 설정 방법

Source: Dev.to

빠른 해결책

Corsfix를 사용하여 프런트엔드 코드에서 Host 헤더를 설정합니다. 원하는 헤더를 x-corsfix-headers 안에 전달하면 Corsfix가 서버‑사이드에서 요청을 전달하기 전에 적용합니다.

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는 요청을 받아 지정한 값으로 Host 헤더를 설정하고 대상 URL로 전달합니다. 그런 다음 응답이 적절한 CORS 헤더와 함께 브라우저에 반환됩니다.

로컬 개발에서는 등록 없이 즉시 작동합니다. 라이브 웹사이트의 경우, 도메인을 설정하세요 (약 30 초 소요).

브라우저가 Host 헤더를 차단하는 이유

Host 헤더는 브라우저의 금지된 헤더 이름 목록에 포함됩니다. 브라우저는 이러한 헤더를 자동으로 관리하며 JavaScript가 수정하도록 허용하지 않습니다. Host 헤더는 서버에 요청이 어떤 도메인을 대상으로 하는지 알려주며, 브라우저는 요청한 URL을 기반으로 이를 설정합니다.

Node.js와 같은 서버‑사이드 환경에서는 Host를 포함한 모든 헤더를 완전히 제어할 수 있습니다:

// Node.js — 정상적으로 동작합니다
const response = await fetch("https://api.example.com/data", {
  headers: {
    Host: "custom-host.example.com",
  },
});

브라우저에서는 해당 헤더가 조용히 무시됩니다:

// Browser — 무시됩니다
fetch("https://api.example.com/data", {
  headers: {
    Host: "custom-host.example.com", // 브라우저에 의해 무시됨
  },
});

브라우저는 항상 URL에 포함된 호스트 이름을 사용하므로 프록시가 필요하게 됩니다.

프록시가 문제를 해결하는 방법

브라우저에서는 Host 헤더를 직접 설정할 수 없기 때문에, 프록시가 이를 대신 수행할 수 있습니다:

1. 브라우저가 대상 URL과 x-corsfix-headers 안에 포함된 오버라이드하려는 헤더들을 함께 Corsfix에 요청합니다.
2. Corsfix는 오버라이드 지시를 읽어 실제 아웃바운드 요청에 Host 헤더를 설정하고, 이를 대상 API로 전달합니다.
3. 대상 API는 지정한 Host 헤더 값을 포함한 요청을 받게 됩니다.

언제 Host 헤더를 설정해야 할까요?

실제 상황에서 Host 헤더를 제어해야 하는 경우:

• 가상 호스팅 – 서버가 동일한 IP에 여러 도메인을 호스팅하고 Host를 사용해 요청을 라우팅합니다.
• API 게이트웨이 – 일부 게이트웨이는 Host 헤더를 검증하고 일치하지 않을 경우 요청을 거부합니다.
• 웹 스크래핑 – 특정 사이트는 봇 탐지 로직의 일환으로 Host를 확인합니다.
• SNI 및 TLS 라우팅 – 로드 밸런서는 올바른 TLS 인증서를 선택하기 위해 Host를 사용할 수 있습니다.

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}`);
}

결론

JavaScript fetch에서 Host 헤더를 설정하려면 Corsfix와 같은 서버‑사이드 프록시를 사용하세요. 브라우저는 Host 헤더를 금지된 헤더 이름으로 제한하기 때문에, 프록시를 사용하는 것이 자체 백엔드를 구축하지 않고도 이를 재정의하는 가장 간단한 방법입니다. Corsfix는 Host 헤더 재정의(및 다른 금지된 헤더)를 서버‑사이드에서 처리하므로, 프록시 인프라에 신경 쓰지 않고 앱 개발에 집중할 수 있습니다. 시작은 무료이며, 프로덕션 사용을 위한 선택적 업그레이드 옵션도 제공합니다.