Range ヘッダー

構文

Range: <unit>=<range-start>-
Range: <unit>=<range-start>-<range-end>
Range: <unit>=<range-start>-<range-end>, …, <range-startN>-<range-endN>
Range: <unit>=-<suffix-length>

ディレクティブ

<unit>

範囲を指定する単位です。 現在のところ、bytes のみが登録された単位です。

<range-start>

整数値で、指定した単位でリクエストする範囲の先頭位置を示します。

<range-end>

整数値で、指定した単位でリクエストする範囲の末尾を示します。 この値は省略可能で、省略時は文書の末尾が範囲の末尾として扱われます。

<suffix-length>

整数値で、リソースの末尾から返す単位数を示します。

例

次の例では、Range ヘッダーを使用して、CORS セーフリストに登録されたリクエストや、複数の範囲を指定するリクエストを行う方法を示します。 他の例については、HTTP 範囲リクエストガイドをご覧ください。

単一のバイトの範囲および CORS セーフリストに登録されたリクエスト

Range ヘッダーは、その値が 1 バイトの範囲である場合、CORS セーフリストリクエストヘッダーとなります。 つまり、プリフライトリクエストが発生することなく、オリジンを越えたリクエストで使用できるため、メディアのリクエストやダウンロードの再開に役立ちます。

次の例では、リソースの最初の 500 バイトをリクエストしています。

Range: bytes=0-499

次の 500 バイトをリクエストするには、次のようにします。

Range: bytes=500-999

終了位置を省略すると、そのリソースの残りのすべての単位をリクエストするようになるため、長さが 1000 バイトのリソースの最後の 100 バイトは、次のようにしてリクエストできます。

Range: bytes=900-

あるいは、リソースのサイズが不明な場合は、接尾辞範囲 -n を使用して、最後の n バイトをリクエストすることもできます。

Range: bytes=-100

複数の範囲をリクエスト

指定された長さが 10000 バイトのリソースについて、次の例では、200-999（800 バイト）、2000-2499（500 バイト）、そして最後に 9500- の 3 つの別個の範囲をリクエストしています。 範囲指定子の値 9500- は終了位置を除外しており、9500 以降のすべてのバイトが 3 つ目（500 バイト）の範囲に含まれることを示しています。

Range: bytes=200-999, 2000-2499, 9500-

ファイルの先頭の 500 バイトと末尾の 500 バイトをリクエストします。範囲が重複した場合はサーバーがリクエストを拒否することがあります。

Range: bytes=0-499, -500

サーバーが範囲リクエストに対応しているかを調べる

次の curl コマンドは、画像に対して HEAD リクエストを送信します。

curl -v --http1.1 -I https://i.imgur.com/z4d4kWk.jpg
# または OPTIONS メソッドを使用して、
# curl -v --http1.1 -X OPTIONS https://i.imgur.com/z4d4kWk.jpg

その結果、次のような HTTP リクエストが送信されます。

HEAD /z4d4kWk.jpg HTTP/1.1
Host: i.imgur.com
User-Agent: curl/8.7.1
Accept: */*

サーバーは 200 レスポンスで応答し、Accept-Ranges: bytes ヘッダーが存在します（簡潔にするため、一部のヘッダーは除外しています）。

HTTP/1.1 200 OK
Connection: keep-alive
Content-Length: 146515
Content-Type: image/jpeg
…
Accept-Ranges: bytes

blob URL から範囲を取得

blob: URL も、fetch()を使用することで、範囲リクエストに対応しています。

const blob = new Blob(["Hello, world!"], { type: "text/plain" });
const url = URL.createObjectURL(blob);
fetch(url, {
  headers: {
    Range: "bytes=7-11",
  },
})
  .then((response) => response.text())
  .then((text) => console.log(text)); // "world"

仕様書

ブラウザーの互換性

関連情報

• If-Range 条件付きリクエストヘッダー
• Content-Range レスポンスヘッダー
• Content-Type
• Accept-Ranges
• 206 Partial Content
• 416 Range Not Satisfiable
• HTTP 範囲付きリクエストガイド
• CORS セーフリストリクエストヘッダー