RequestInit 가져오기 - 범위가 지정됨, 전역

  • 릴리스 버전: Yokohama
  • 업데이트 날짜 2025년 01월 30일
  • 읽기10분
  • RequestInit API는 Fetch 요청을 구성하는 옵션을 제공합니다.

    RequestInit 객체를 Request() 생성자에 전달하거나 fetch() 함수 호출에 직접 전달할 수 있습니다. RequestInit() 호출로 요청을 생성하고 다른 RequestInit()와 함께 fetch() 호출에 요청을 전달할 수도 있습니다. 두 위치에 동일한 옵션이 설정되어 있을 때 이 작업을 수행하면 fetch( )에 직접 전달된 값이 사용됩니다.

    이 API는 외부 웹 사이트에서 자원을 가져오기 위한 다양한 작업을 제공하는 Fetch API 세트의 일부입니다. 전체 Fetch API 컬렉션에는 다음이 포함됩니다.

    가져오기 작업을 지원하기 위해 시스템 속성 glide.hosts.allowlist를 사용하면 가져오기 메서드가 액세스할 수 있는 호스트를 제어할 수 있습니다. RestMessageV2와 같은 HTTP API 및 위에서 언급한 API에 적용됩니다. glide.hosts.allowlist에 대한 자세한 내용은 문서를 참조하십시오Available system properties.

    RequestInit 가져오기 - RequestInit

    가져오기 요청을 구성하는 옵션을 설정합니다. RequestInit 객체를 Request() 생성자에 전달하거나 fetch() 함수 호출에 직접 전달할 수 있습니다.

    RequestInit 속성

    RequestInit API는 HTTP 요청 동작을 구성하는 데 사용할 수 있는 몇 가지 선택적 속성을 지원합니다. 해당 속성에는 메서드 (HTTP 메서드), 헤더 (요청 헤더), 본문 (보낼 데이터), 모드 (CORS 모드), 자격 증명 (인증 세부 정보), 캐시 (캐시 동작) 및 리디렉션, 리퍼러무결성과 같은 기타가 포함됩니다. 이러한 옵션을 사용하면 다양한 사용 사례에 대한 요청 동작을 세밀하게 조정할 수 있습니다. 각 속성에 대한 자세한 설명은 문서를 참조하십시오 https://developer.mozilla.org/en-US/docs/Web/API/RequestInit.

    표 1. RequestInit 속성
    속성 이름 설명
    attributionReporting 옵션입니다. 요청 응답이 JavaScript 기반 속성 소스 또는 속성 트리거를 등록할 수 있기를 원함을 나타냅니다.
    attributionReporting 은 다음 속성을 포함하는 객체입니다.
    • eventSourceEligible: 부울. true로 설정하면 요청의 응답이 속성 소스를 등록할 수 있습니다. false로 설정하면 속성 소스로 등록할 수 없습니다.
    • triggerEligible: 부울입니다. true로 설정하면 요청의 응답이 속성 트리거를 등록할 수 있습니다. false로 설정하면 속성 트리거로 등록할 수 없습니다.

    데이터 유형: 객체

    본문 옵션입니다. 요청 본문에는 POST 또는 PUT 요청 등에서 서버로 보낼 콘텐츠가 포함되어 있습니다.
    허용되는 유형:
    • 어레이 버퍼
    • 문자열
    • Blob
    • 데이터뷰
    • 파일
    • FormData
    • ReadableStream
    • TypedArray
    • URLSearchParams
    browsingTopics 옵션입니다. 현재 사용자에 대해 선택한 주제를 연결된 요청과 함께 Sec-Browsing-Topics 헤더로 보내야 하는지 여부를 나타내는 플래그입니다.
    허용되는 값:
    • true: 현재 사용자에 대해 선택한 주제를 Sec-Browsing-Topics 헤더로 보내야 합니다.
    • false: 현재 사용자에 대해 선택한 주제를 Sec-Browsing-Topics 헤더로 보내면 안 됩니다.

    데이터 유형: 부울

    캐시 옵션입니다. 요청에 사용할 캐시 모드입니다.
    허용되는 값:
    • 기본값: 브라우저는 HTTP 캐시에서 요청과 일치하는 응답을 찾습니다.
    • force-cache: 브라우저는 HTTP 캐시에서 요청과 일치하는 응답을 찾습니다.
    • no-cache: 브라우저는 HTTP 캐시에서 요청과 일치하는 응답을 찾습니다.
    • no-store : 브라우저는 캐시를 먼저 찾지 않고 원격 서버에서 리소스를 가져오고 다운로드 한 리소스로 캐시를 업데이트하지 않습니다.
    • only-if-cached: 브라우저는 HTTP 캐시에서 요청과 일치하는 응답을 찾습니다.
    • reload: 브라우저는 캐시를 먼저 확인하지 않고 원격 서버에서 리소스를 가져온 다음 다운로드한 리소스로 캐시를 업데이트합니다.

    only-if-cached 모드는 요청의 모드가 동일 원본인 경우에만 사용할 수 있습니다. 캐시된 리디렉션은 요청의 리디렉션 속성이 follow 이고 리디렉션이 동일 원본 모드를 위반하지 않는 경우 따릅니다.

    데이터 유형: 문자열

    자격 증명 옵션입니다. 브라우저에서 요청과 함께 자격 증명을 전송할지 여부와 Set-Cookie 응답 헤더가 준수되는지 여부를 제어합니다. 자격 증명은 쿠키, TLS 클라이언트 인증서 또는 사용자 이름과 암호가 포함된 인증 헤더입니다.
    허용되는 값:
    • include: 교차 오리진 요청에 대해서도 항상 자격 증명을 포함합니다.
      주:
      원본 간 요청에 자격 증명을 포함하면 사이트가 CSRF 공격에 취약해질 수 있으므로 자격 증명포함으로 설정되어 있더라도 서버는 응답에 Access-Control-Allow-Credentials를 포함하여 자격 증명을 포함하는 데 동의해야 합니다. 또한 이 상황에서 서버는 Access-Control-Allow-Origin 응답 헤더에서 클라이언트의 원본을 명시적으로 지정해야 합니다( 즉, *is 허용되지 않음).
    • 생략: 요청에 자격 증명을 보내거나 응답에 자격 증명을 포함하지 않습니다.
    • same-origin: same-origin 요청에 대한 자격 증명만 보내고 포함합니다.

    기본값: same-origin

    데이터 유형: 문자열

    헤더 옵션입니다. 요청에 추가할 헤더로, Headers 객체 또는 키가 헤더 이름이고 값이 헤더 값인 객체 리터럴 내에 포함됩니다.

    많은 헤더는 브라우저에 의해 자동으로 설정되며 스크립트에 의해 설정될 수 없습니다. 이를 금지된 헤더 이름이라고 합니다.

    mode 옵션이 no-cors로 설정된 경우 CORS 수신 허용 목록에 지정된 요청 헤더만 설정할 수 있습니다.

    데이터 유형: 문자열

    무결성 옵션입니다. 요청의 하위 자원 무결성 값을 포함합니다. 자원을 가져올 때 확인됩니다. 브라우저는 지정된 알고리즘을 사용하여 가져온 리소스의 해시를 계산하고, 결과가 지정된 값과 일치하지 않으면 네트워크 오류와 함께 가져오기 요청을 거부합니다.
    이 옵션의 형식은 <hash-algo>-<hash-source입니다> 여기서
    • <hash-algo>: SHA256, SHA384 또는 SHA512 값 중 하나입니다.
    • <hash-source>: 지정된 해시 알고리즘으로 리소스를 해시한 결과의 Base64 인코딩입니다.

    기본값은 빈 문자열입니다.

    데이터 유형: 문자열

    연결 유지 옵션입니다. 요청이 완료되기 전에 시작된 페이지가 언로드되는 경우 연결된 요청을 중단할지 여부를 나타내는 플래그입니다.

    keepalive 요청의 본문 크기는 64 키비바이트로 제한됩니다.

    유효한 값은 다음과 같습니다.
    • true: 브라우저가 연결된 요청을 중단하지 않습니다.
    • false: 연결된 요청을 중단합니다.

    데이터 유형: 부울

    기본값: false

    방법 옵션입니다. 요청 메서드입니다.

    데이터 유형: 문자열

    기본값: GET

    모드 옵션입니다. 요청에 대한 교차 출처 동작을 설정합니다.
    유효한 값은 다음과 같습니다.
    • same-origin: 교차 출처 요청을 허용하지 않습니다. 동일 오리진 요청이 다른 오리진으로 전송되면 네트워크 오류가 발생합니다.
    • cors: 요청이 교차 출처인 경우 CORS(Cross-Origin Resource Sharing) 메커니즘을 사용합니다. CORS 수신 허용 목록 응답 헤더만 응답에 노출됩니다.
    • no-cors: 원본 간 요청에 대해 CORS를 사용하지 않도록 설정합니다. 이 옵션에는 다음과 같은 제한 사항이 있습니다.
      • 메서드는 HEAD,GET 또는 POST 중 하나만 사용할 수 있습니다.
      • 헤더는 CORS 수신 허용 목록에 지정된 요청 헤더만 될 수 있으며 Range 헤더도 허용되지 않는다는 추가 제한 사항이 있습니다. 이는 서비스 작업자가 추가한 모든 헤더에도 적용됩니다.
      • 응답이 불투명하므로 헤더와 본문을 JavaScript에서 사용할 수 없으며 상태 코드는 항상 0입니다.
    • navigate: HTML 탐색에서만 사용됩니다. 탐색 요청은 문서 사이를 탐색하는 동안에만 생성됩니다.

    데이터 유형: 문자열

    기본값: cors

    우선순위 옵션입니다. 같은 유형의 다른 요청과 비교했을 때 페치 요청의 우선순위를 지정합니다.
    유효한 값은 다음과 같습니다.
    • auto: 가져오기 우선 순위에 대한 사용자 기본 설정이 없습니다. 값이 설정되지 않았거나 잘못된 값이 설정된 경우에 사용됩니다.
    • high: 같은 유형의 다른 요청에 비해 우선순위가 높은 페치 요청입니다.
    • 낮음: 같은 유형의 다른 요청에 비해 우선순위가 낮은 페치 요청입니다.

    데이터 유형: 문자열

    기본값: auto

    redirect 옵션입니다. 서버가 리디렉션 상태로 회신하는 경우 브라우저의 동작을 결정합니다.
    허용되는 값:
    • 팔로우: 리디렉션을 자동으로 따릅니다.
    • 오류: 리디렉션 상태가 반환될 때 네트워크 오류와 함께 약속을 거부합니다.
    • manual: 거의 모든 필드가 필터링된 응답을 반환하여 서비스 워커가 응답을 저장하고 나중에 재생할 수 있도록 합니다.

    데이터 유형: 문자열

    기본값: 팔로우

    참조자 옵션입니다. 요청의 Referrer 헤더에 사용할 값을 지정하는 문자열입니다.
    허용되는 값 및 데이터 유형:
    • about:client: Referrer 헤더를 요청 컨텍스트의 기본값(예: 요청한 페이지의 URL)으로 설정합니다.
    • empty string: Referrer 헤더를 생략합니다.
    • same-origin relative or absolute URL: 레퍼러 헤더를 지정된 값으로 설정합니다. 상대 URL은 요청을 수행한 페이지의 URL을 기준으로 확인됩니다.

    기본값: about:client

    리퍼러정책 옵션입니다. Referrer 헤더에 대한 정책을 설정하는 문자열입니다. 이 옵션의 구문과 의미 체계는 Referrer-Policy 헤더와 정확히 동일합니다.

    데이터 유형: 문자열

    신호 옵션입니다. AbortSignal입니다. 이 옵션을 설정하면 해당 AbortController에서 abort()를 호출하여 요청을 취소할 수 있습니다.

    데이터 유형: 문자열

    표 2. 반환
    유형 설명
    안 함

    fetch()에 옵션 전달

    이 예제는 method, body 및 headers 옵션을 fetch() 메서드에 직접 전달하는 방법을 보여줍니다:

    async function post() {
      const response = await fetch("https://example.org/post", {
        method: "POST",
        body: JSON.stringify({ username: "example" }),
        headers: {
          "Content-Type": "application/json",
        },
      });
    
      console.log(response.status);
    }

    Request() 생성자에 옵션 전달

    이 예제는 Request를 만들고 method, body 및 headers 옵션을 생성자에 전달하고 요청을 fetch()에 전달하는 방법을 보여줍니다.

    async function post() {
      const request = new Request("https://example.org/post", {
        method: "POST",
        body: JSON.stringify({ username: "example" }),
        headers: {
          "Content-Type": "application/json",
        },
      });
    
      const response = await fetch(request);
    
      console.log(response.status);
    }

    Request() 및 fetch() 모두에 옵션 전달

    이 예제에서는 Request() 를 만들고 method, body 및 headers 옵션을 생성자에 전달하는 방법을 보여줍니다. 그런 다음 스크립트는 본문 및 리퍼러 옵션과 함께 요청을 fetch() 에 전달합니다.

    이 경우 요청은 다음 옵션과 함께 전송됩니다.
    • 메서드: "POST"
    • 헤더: {"Content-Type": "application/json"}
    • body: '{"username":"example2"}'
    • 참조자: ""
    async function post() {
      const request = new Request("https://example.org/post", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({ username: "example1" }),
      });
    
      const response = await fetch(request, {
        body: JSON.stringify({ username: "example2" }),
        referrer: "",
      });
    
      console.log(response.status);
    }