RequestInit のフェッチ :スコープ対象、グローバル

  • リリースバージョン: Yokohama
  • 更新日 2025年01月30日
  • 所要時間:12分
  • RequestInit API には、フェッチ要求を構成するオプションが用意されています。

    RequestInit オブジェクトを Request() コンストラクタに渡すか、 fetch() 関数呼び出しに直接渡すことができます。また、RequestInit() 呼び出しを使用して Request を作成し、その Request を別の RequestInit() とともに fetch() 呼び出しに渡すこともできます。両方の場所で同じオプションが設定されている場合、 fetch() に直接渡された値が使用されます。

    この API は、外部 Web サイトからリソースを取得するためのさまざまなアクションを提供する一連の フェッチ 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 プロパティ
    プロパティ名 説明
    属性レポート オプション。要求の応答で JavaScript ベースのアトリビューションソースまたはアトリビューショントリガーを登録できるようにすることを示します。
    attributionReporting は、次のプロパティを含むオブジェクトです。
    • eventSourceEligible:ブール値。true に設定すると、要求の応答はアトリビューションソースを登録できます。false に設定すると、アトリビューションソースとして登録できません。
    • triggerEligible:ブール値。true に設定すると、要求の応答はアトリビューショントリガーを登録できます。false に設定すると、アトリビューショントリガーとして登録できません。

    データタイプ:オブジェクト

    本文 オプション。要求本文には、サーバーに送信するコンテンツ (POST 要求や PUT 要求など) が含まれています。
    受け入れられるタイプ:
    • アレイバッファ
    • 文字列
    • BLOB
    • データビュー
    • ファイル
    • フォームデータ
    • ReadableStream
    • TypedArray
    • URLSearchParams
    browsingTopic オプション。現在のユーザーに対して選択したトピックを、関連する要求とともに Sec-Browsing-Topics ヘッダーで送信するかどうかを示すフラグ。
    許容値:
    • true:現在のユーザーに対して選択されたトピックを Sec-Browsing-Topics ヘッダーで送信する必要があります
    • false:現在のユーザーに対して選択されたトピックを Sec-Browsing-Topics ヘッダーで送信しないでください。

    データタイプ:ブール

    キャッシュ オプション。要求に使用するキャッシュモード。
    許容値:
    • default:ブラウザーは HTTP キャッシュで要求に一致する応答を探します。
    • force-cache:ブラウザーは HTTP キャッシュで要求に一致する応答を探します。
    • no-cache:ブラウザーは HTTP キャッシュで要求に一致する応答を探します。
    • no-store:ブラウザーは最初にキャッシュを調べずにリモートサーバーからリソースをフェッチし、ダウンロードしたリソースでキャッシュを更新しません。
    • only-if-cached:ブラウザーは HTTP キャッシュで要求に一致する応答を探します。
    • reload: ブラウザは最初にキャッシュを調べずにリモートサーバーからリソースを取得しますが、ダウンロードしたリソースでキャッシュを更新します。

    キャッシュされた場合のみモードは、要求のモードが同一生成元の場合にのみ使用できます。要求の リダイレクト プロパティが フォロー され、リダイレクトが 同一オリジン モードに違反していない場合、キャッシュされたリダイレクトがフォローされます。

    データタイプ:文字列

    認証情報 オプション。ブラウザが要求とともに認証情報を送信するかどうか、および Set-Cookie 応答ヘッダーが優先されるかどうかを制御します。認証情報は、cookie、TLS クライアント証明書、またはユーザー名とパスワードを含む認証ヘッダーです。
    許容値:
    • include:クロスオリジン要求であっても、常に認証情報を含めます。
      注:
      クロスオリジン要求に認証情報を含めると、サイトが CSRF 攻撃に対して脆弱になる可能性があるため、認証情報を含めるように設定されている場合でも、サーバーは応答に Access-Control-Allow-Credentials を含めることで、認証情報を含めることに同意する必要があります。さらに、この状況では、サーバーは Access-Control-Allow-Origin 応答ヘッダーでクライアントのオリジンを明示的に指定する必要があります ( つまり、*は許可されません)。
    • omit:要求で認証情報を送信しないか、応答に認証情報を含めません。
    • same-origin:同一生成元の要求に対してのみ認証情報を送信し、含めます。

    デフォルト:same-origin

    データタイプ:文字列

    ヘッダー オプション。Headers オブジェクトまたは、キーがヘッダーの名前で、値がヘッダー値であるオブジェクトリテラル内に含まれる、要求に追加するヘッダー。

    ヘッダーの多くはブラウザーによって自動的に設定され、スクリプトでは設定できません。これらは、禁止されたヘッダー名と呼ばれます。

    mode オプションが no-cors に設定されている場合は、CORS セーフリストに追加された要求ヘッダーのみを設定できます。

    データタイプ:文字列

    完全性 オプション。要求のサブリソース整合性値が含まれています。これは、リソースがフェッチされるときにチェックされます。ブラウザーは指定されたアルゴリズムを使用してフェッチされたリソースのハッシュを計算し、結果が指定された値と一致しない場合は、ネットワークエラーでフェッチ要求を却下します。
    このオプションの形式は <hash-algo>-<hash-source> です。
    • <hash-algo>:sha256、sha384、sha512 のいずれかの値です。
    • <hash-source>:指定されたハッシュアルゴリズムでリソースをハッシュした結果の Base64 エンコーディングです。

    デフォルトは空の文字列です。

    データタイプ:文字列

    キープアライブ オプション。要求が完了する前に要求を開始したページがアンロードされた場合に、関連する要求を中止するかどうかを示すフラグ。

    キープアライブ要求の本文サイズは 64 キビバイトに制限されています。

    有効な値:
    • true:ブラウザーは関連する要求を中止しません。
    • false:関連する要求を中止します。

    データタイプ:ブール

    デフォルト値:false

    メソッド オプション。要求の方法。

    データタイプ:文字列

    デフォルト:GET

    mode オプション。要求のクロスオリジン動作を設定します。
    有効な値:
    • same-origin:クロスオリジン要求を禁止します。同一作成元の要求が別の送信元に送信された場合、結果はネットワークエラーになります。
    • cors: 要求がクロスオリジンである場合、クロスオリジンリソース共有 (CORS) メカニズムが使用されます。応答には、CORS セーフリストに登録された応答ヘッダーのみが公開されます。
    • no-cors:クロスオリジン要求の CORS を無効にします。このオプションには次の制限があります。
      • メソッドは、 HEADGET 、または POST のいずれかのみです。
      • ヘッダーは CORS セーフリストに登録された要求ヘッダーのみにすることができますが、Range ヘッダーも許可されないという追加の制限があります。これは、サービスワーカーによって追加されたヘッダーにも適用されます。
      • 応答は不透明です。つまり、ヘッダーと本文は JavaScript で使用できず、ステータスコードは常に 0 です。
    • navigate:HTML ナビゲーションでのみ使用されます。ナビゲート要求は、ドキュメント間を移動するときにのみ作成されます。

    データタイプ:文字列

    デフォルト:cors

    priority オプション。同じタイプの他の要求と比較したフェッチ要求の優先度を指定します。
    有効な値:
    • auto:フェッチ優先度にユーザー設定がありません。値が設定されていない場合、または無効な値が設定されている場合に使用されます。
    • 高:同じタイプの他の要求と比較して優先度の高いフェッチ要求。
    • 低:同じタイプの他の要求と比較して優先度の低いフェッチ要求。

    データタイプ:文字列

    デフォルト:auto

    リダイレクト オプション。サーバーがリダイレクトステータスで応答した場合のブラウザーの動作を決定します。
    許容値:
    • フォロー:リダイレクトを自動的にフォローします。
    • error:リダイレクトステータスが返されたときに、ネットワークエラーで約束を却下します。
    • manual:サービスワーカーが応答を保存し、後で再生できるように、ほぼすべてのフィールドを除外した応答を返します。

    データタイプ:文字列

    デフォルト:フォロー

    リファラー オプション。要求の Referrer ヘッダーに使用する値を指定する文字列。
    許容される値とデータタイプ:
    • about:client: Referrer ヘッダーを要求のコンテキストのデフォルト値 (たとえば、要求を行ったページの URL など) に設定します。
    • 空文字列: Referrer ヘッダーを省略します。
    • same-origin relative or absolute URL: Referrer ヘッダーを指定された値に設定します。相対 URL は、要求を行ったページの URL を基準にして解決されます。

    デフォルト:about:client

    リファラーポリシー オプション。Referrer ヘッダーのポリシーを設定する文字列。このオプションの構文とセマンティクスは、Referrer-Policy ヘッダーの場合とまったく同じです。

    データタイプ:文字列

    シグナル オプション。AbortSignal。このオプションが設定されている場合、対応する AbortControllerabort() を呼び出すことでリクエストをキャンセルできます。

    データタイプ:文字列

    表 : 2. 戻り値
    タイプ 説明
    なし

    fetch() にオプションを渡す

    この例は、メソッド、本文、およびヘッダーのオプションを 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 を作成し、メソッド、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() を作成し、メソッド、本文、およびヘッダオプションをコンストラクタに渡す方法を示しています。次に、スクリプトは要求を body オプションと referrer オプションとともに fetch() に渡します。

    この場合、要求は次のオプションで送信されます。
    • method:「POST」
    • headers: {"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);
    }