---
title: Request.mode
slug: Web/API/Request/mode
tags:
  - API
  - Experimental
  - Fetch
  - Property
  - Reference
  - mode
  - request
translation_of: Web/API/Request/mode
---
<div>{{APIRef("Fetch")}}{{SeeCompatTable}}</div>

<p>{{domxref("Request")}} インターフェースの <strong><code>mode</code></strong> 読み取り専用プロパティは、リクエストのモード（たとえば、<code>cors、</code><code>no-cors、</code><code>cors-with-forced-preflight、</code><code>same-origin</code>）を含みます。これは、クロスオリジンリクエストに対して有効なレスポンスができるか、またレスポンスのプロパティが読み取り可能かどうかを判定するために使用されます。</p>

<h2 id="構文">構文</h2>

<pre class="syntaxbox">var <var>myMode</var> = <var>request</var>.mode;</pre>

<h3 id="値">値</h3>

<p>{{domxref("RequestMode")}} の値は以下のいずれかです。</p>

<ul>
 <li><code>same-origin</code> — このモードを設定してほかのオリジンにリクエストをした場合、結果は単純にエラーになります。リクエストが常に同一オリジンに行われることを保証するために使用できます。</li>
 <li><code>no-cors</code> — <code>HEAD か</code> <code>GET、</code><code>POST </code>以外のメソッドを防ぎます。任意の ServiceWorkers がこれらをインターセプトする場合、<a href="https://fetch.spec.whatwg.org/#simple-header">シンプルヘッダー</a>を除いてヘッダーを追加したりオーバーライドしたりできなくなります。加えて、JavaScript は解決された {{domxref("Response")}} のプロパティにはアクセスできません。これはServiceWorkers が Web のセマンティクスに影響を与えないことを保証し、ドメインを跨いでデータが流出することでセキュリティやプライバシーの問題が生じるのを防ぎます。</li>
 <li><code>cors</code> — クロスオリジンリクエストを許可します。たとえば、サードパーティベンダーが提供する様々な API にアクセスできます。これらは、<a href="https://developer.mozilla.org/ja/docs/Web/HTTP/Access_control_CORS">CORS プロトコル</a>に則ることが期待されています。<a href="https://fetch.spec.whatwg.org/#concept-filtered-response-cors">制限された</a>ヘッダーだけが {{domxref("Response")}} で使用できますが、body は読み取り可能です。</li>
 <li><code>navigate</code> — ナビゲーションを許可します。<code>navigate</code> はHTMLナビゲーションによってのみ利用されることを意図しています。ナビゲーションリクエストはドキュメント間のナビゲーションの場合にだけ生成されます。</li>
</ul>

<h4 id="デフォルトのmode">デフォルトのmode</h4>

<p>リクエストは様々な方法で初期化されますが、modeの値はその方法によって変わります。</p>

<p>たとえば、<code>Request</code>オブジェクトが{{domxref("Request.Request")}}コンストラクタで生成された場合、<code>mode</code>の値は<code>cors</code>にセットされます。</p>

<p>しかし、リクエストが{{domxref("Request.Request")}}コンストラクタ以外で生成された場合は<code>mode</code>として通常<code>no-cors</code>がセットされます。たとえばマークアップから生成された埋め込みリソースのようなリクエストは、<code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes">crossorigin</a></code>アトリビュートが設定されていない限り、<code>no-cors</code>を利用します。そのようなものの例として、{{HTMLElement("link")}} や {{HTMLElement("script")}} エレメント（ただしモジュールを除く）、{{HTMLElement("img")}}、{{HTMLElement("audio")}}、{{HTMLElement("video")}}、{{HTMLElement("object")}}、{{HTMLElement("embed")}}、{{HTMLElement("iframe")}} エレメントなどが存在します。</p>

<h2 id="例">例</h2>

<p>以下のスニペットは、{{domxref("Request.Request()")}} コンストラクタを使って（スクリプトと同じディレクトリにある画像ファイルのために）新しいリクエストを生成してから、リクエストモードを変数に保存しています：</p>

<pre class="brush: js">var myRequest = new Request('flowers.jpg');
var myMode = myRequest.mode; // 既定で "cors" を返す。</pre>

<h2 id="仕様">仕様</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">仕様</th>
   <th scope="col">状態</th>
   <th scope="col">コメント</th>
  </tr>
  <tr>
   <td>{{SpecName('Fetch','#dom-request-mode','mode')}}</td>
   <td>{{Spec2('Fetch')}}</td>
   <td>Initial definition</td>
  </tr>
 </tbody>
</table>

<h2 id="ブラウザ実装状況">ブラウザ実装状況</h2>

<p><br>
 {{Compat("api.Request.mode")}}</p>

<h2 id="関連項目">関連項目</h2>

<ul>
 <li><a href="/ja/docs/Web/API/ServiceWorker_API"><u><font color="#0066cc">ServiceWorker API</font></u></a></li>
 <li><a href="/ja/docs/Web/HTTP/Access_control_CORS"><u><font color="#0066cc">HTTP access control (CORS)</font></u></a></li>
 <li><a href="/ja/docs/Web/HTTP"><u><font color="#0066cc">HTTP</font></u></a></li>
</ul>