すべてのプロダクト
Search
ドキュメントセンター

Edge Security Acceleration:フェッチAPI

最終更新日:Aug 09, 2024

Fetch APIを呼び出して、HTTPまたはHTTPSを介してPOP (Point of presence) からデータを取得し、そのデータをユーザーに返すことができます。 ブラウザ環境のFetch APIに似ており、コンテンツの動的読み込み、バックエンドサービスとのやり取り、A/Bテストなどのシナリオで使用できます。

Redirect

Fetch APIは3xxリダイレクトをサポートしています。 フェッチ要求は3xxリダイレクトに従うことができます。 HTTP 3xxステータスコードには、301、302、303、307、および308が含まれます。 リダイレクトパラメーターは、ビジネス要件に基づいて次のいずれかの値に設定できます。

  • {redirect: "manual"}: フェッチリクエストが3xxリダイレクトに従わない。 3xxリダイレクトは手動で処理する必要があります。 デフォルト値です。

  • {redirect: "error"}: 3xxリダイレクトが発生すると例外がスローされます。

  • {redirect: "follow"}: フェッチリクエストは3xxリダイレクトに従います。 Fetch APIでサポートされている3xxリダイレクトの最大数は20です。

次の表に、3xxステータスコードを示します。

HTTPステータスコード

リダイレクトの説明

301、302、303、308

リクエストメソッドはGETに変更され、本文は無視されます。

307

リクエストメソッドがGETの場合のみ、フェッチリクエストはリダイレクトに従います。 リクエストメソッドがGETでない場合、例外がスローされます。

説明

リクエストのリダイレクト先のURLは、Locationヘッダーに含まれています。 Locationヘッダーがない場合は、例外がスローされます。

  • Locationヘッダーには、コンマ (,) で区切られたURLのリストを含めることができます。 リクエストは、リストの最初のURLにのみリダイレクトされます。 他のURLは無視される。

  • Locationヘッダーには、絶対URLまたは相対URLを含めることができます。

解凍

Fetch APIを使用すると、fetch("https://www.example.com",{decompress: "manual"}) などの解凍モードを設定できます。 解凍パラメータは、次の値をサポートします。

  • manual: データを解凍しません。 サーバがフェッチ要求時に圧縮データを返す場合、EdgeRoutine (ER) によって受信されたデータも圧縮される。

  • decompress: データを自動的に解凍します。 デフォルト値です。 Fetch APIはGzip圧縮をサポートしています。 ERは、Content-Encodingヘッダーに基づいてデータを自動的に検出または解凍します。 ERがデータを解凍した後、ERはContent-Encodingの値を変更します。 Gzipパラメーターが削除されている場合、データ送信中の例外を防ぐために次の設定を構成できます。

    • content-encoding: gzip: ERはContent-Encodingの値を認識し、データを解凍します。

    • content-encoding: gzip, identity: ERはContent-Encodingの値を認識し、データを解凍します。

    説明

    Gzip以外のアルゴリズムは例外を引き起こす。

  • fallbackIdentity: この値の効果は、値の解凍の効果に似ています。 ERがこの値を認識できない場合、ERはデータを解凍しません。

重要

Fetch APIが自動的にデータを解凍した後、レスポンスにContent-Lengthヘッダーが含まれている場合、必要に応じてContent-Lengthヘッダーを渡すことはできません。 これは、Content-Lengthヘッダーが解凍前のデータのサイズを示すためです。

CdnProxy

Fetch APIを使用してERでサブリクエストを行うと、次の図のステップ6に示すように、ERはHTTPリクエストをインターネットに直接送信します。 次の図に示すように、Alibaba Cloud CDNまたはDCDNをプロキシとして使用してサブリクエストを処理することもできます。 この場合、サブリクエストはステップ5と3を介して処理されます。 Alibaba Cloud CDNをプロキシとして使用するには、fetch("http://www.example.com", {cdnProxy: true}) のようにcdnProxyパラメーターを設定します。 cdnProxyパラメーターを使用して、Alibaba Cloud CDNおよびDCDNドメイン名からのみリソースを取得できます。 cdnProxyパラメーターを使用すると、Fetchリクエストは、DNS解決後に他のPOPにリダイレクトされることなく、同じPOPにキャッシュされたファイルに直接アクセスできます。 これは時間消費を減らす。

説明

Fetch APIを使用してリソースをフェッチするs www.example.comなどのドメイン名は、Alibaba Cloud CDNまたはDCDNに追加する必要があります。 それ以外の場合、HTTP 403ステータスコードが返されます。 Alibaba Cloud CDNまたはDCDNをプロキシとして使用すると、Alibaba Cloud CDNまたはDCDNのドメイン名のすべての設定が自動的にトリガーされます。

How it works

content-length

フェッチリクエストでContent-Lengthヘッダーを設定すると、データはContent-Lengthヘッダーで指定された形式でエンコードされ、データを送信するためにfetch APIによって使用される方法が変更されます。 Content-Lengthヘッダーを設定しない場合、Fetch APIはボディストリーム内のすべてのデータを自動的に取得し、データを送信します。 送信されたデータは、チャンク転送符号化方式を用いて符号化される。

  • コンテンツ長の設定

    • Content-Lengthヘッダが負でない値に設定されている場合、Fetch APIは、Content-Lengthヘッダに基づいてボディストリームからデータをフェッチし、フェッチされたデータを送信します。 Content-Lengthが0に設定されている場合、データは送信されません。

    • Content-Lengthヘッダーが無効な値に設定されている場合、Fetch APIはボディ内のすべての値を送信します。 送信されたデータは、チャンク転送符号化方式を用いて符号化される。

  • Fetch APIは自動的にデータを解凍します。 データが解凍された後、Content-Lengthヘッダーはレスポンスに保持されます。 Content-Lengthヘッダは、データが解凍される前のデータのサイズを示す。 本文を変更した後にFetch APIを呼び出す場合は、Content-Lengthヘッダーを変更する必要があるかどうかを確認します。 Content-Lengthヘッダーを変更する必要があるが、変更しない場合、送信されるコンテンツが正しくない可能性があります。

    次の例では、Content-Lengthヘッダーを含むPOSTリクエストがクライアントから送信されます。 Fetch APIを呼び出してデータをフェッチすると、リクエストボディはクライアント要求のHeadersオブジェクトを使用します。 Content-Lengthヘッダーの値は、ボディの実際のサイズとは異なる場合があります。 Headersオブジェクトが送信された場合は、本文のサイズが変更されているかどうかを確認します。

    addEventListener('fetch', (event) => {
      event.respondWith(h(event));
    });
    
    async function h(event) {
      return fetch("http://www.example.com", {
        headers: event.request.headers,
        method: event.request.method,
        body: "SomeData"
      });
    }

Headers

  • 定義

    Headersオブジェクトの詳細については、「Headers」をご参照ください。

  • 制限事項

    ヘッダーは、消費されたメモリリソースの量を記録します。 Headersオブジェクトの最大サイズは8 KBです。 Headersオブジェクトのサイズがこの制限を超えると、JavaScript例外がスローされます。

  • ブラックリスト

    Fetch APIはヘッダーブラックリストを使用します。 ブラックリストにあるヘッダーを読み書きしようとすると、例外がスローされます。 次の表に、ブラックリストに含まれるヘッダーを示します。

    • 期待

    • te

    • トレーラー

    • アップグレード

    • プロキシ接続

    • 接続数

    • keep-alive

    • dnt

    • host

    • 予約済みヘッダー

リクエスト

  • 定義

    リクエスト操作の詳細については、「リクエスト」をご参照ください。

  • 制限事項

    Requestオブジェクトの次のプロパティは使用されていません。

    • context

    • 資格情報

    • 目的地

    • インテグリティ

    • モード

    • リファラー

    • referrerPolicy

    • cache

  • リクエスト操作のユースケース

    • リクエストメソッドを取得します: request.method

    • リクエストURLを取得します。request.url

    • リクエストヘッダーを取得します: request.header

    • リクエストペイロードを取得します: request.body。 Bodyプロパティ (body) はReadableStreamオブジェクトです。

    • JSONデータを取得する: wait request.json()

    • フォームデータを取得する: await request.formData()

    • UTF-8: await request.text() でエンコードされた文字列を取得します。

    要求操作は、標準的なAPI操作である。 要求操作は、ERのメモリリソースを消費する必要なしに、ボディのすべての値をフェッチするときにボディを無視します。 これにより、ガベージコレクション (GC) の一時停止時間が最小限に抑えられ、要求本文のすべての値が基になるソケットから確実にフェッチされます。 フェッチされた本文を読み取る必要がない場合は、すべてのフェッチ要求に対して、await request.ignore()request.ignoreを呼び出すことができます。 リクエストの本文がフェッチされた後、ERは将来の使用のためにリクエストを接続プールに自動的に送信します。

レスポンス

  • 定義

    応答操作の詳細については、「応答」をご参照ください。

  • 制限事項

    ResponseオブジェクトのuseFinalURLSおよびerrorプロパティは使用されていません。

  • レスポンス操作のユースケース

    • 応答コードresponse.statusを取得します。

    • 応答の理由フレーズresponse.statusTextを取得します。

    • レスポンスヘッダーを取得します: response.headers

    • 応答URLを取得します。response.url

    • 他のURLにリダイレクトするURLのリストを取得します: response.urlList。 このメソッドは非標準のメソッドで、RequestオブジェクトによるBody mixinの実装に似ています。 同様のメソッドを使用して、Bodyオブジェクトを取得できます。

FormData

  • 定義

    FormData操作の詳細については、「FormData」をご参照ください。

  • 制限事項

    FormData操作は、Headers操作に似ています。 FormDataはヘッダーのサイズを制限します。 ヘッダーのサイズが上限を超えると、例外がスローされます。 FormDataをHTTPリクエスト本文として送信する場合、デフォルトでcontent-typeform-data/multipartに設定されます。

URLSearchParams

  • 定義

    URLSearchParams操作の詳細については、「URLSearchParams() 」をご参照ください。

  • 制限事項

    URLSearchParamsをHTTPリクエスト本文として送信する場合、デフォルトでcontent-typeapplication/x-www-form-urlencodeに設定されます。 データサイズは1,000バイトを超えることはできません。

ブロブとファイル

  • 定義

    • Blob操作の詳細については、「Blob」をご参照ください。

    • ファイル操作の詳細については、「ファイル」をご参照ください。

  • 制限事項

    ERは、BlobおよびFile操作の標準を満たすBlobおよびFileクラスをサポートしています。 ERはファイルを読み書きできません。 ERでサポートされているBlobクラスとFileクラスをレスポンス本文に渡すことができます。 content-typeヘッダーの値は、BlobまたはFile操作のMIMEタイプと同じです。