files/zh-cn/web/api/request/mode/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80

---
title: Request.mode
slug: Web/API/Request/mode
tags:
  - API
  - Fetch
  - 参考
  - 属性
  - 请求
translation_of: Web/API/Request/mode
---
<div>{{APIRef("Fetch")}}</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> 或 <code>navigate</code> 。）这用于确定跨域请求是否能得到有效的响应，以及响应的哪些属性是可读的。</p>

<ul>
</ul>

<h2 id="语法">语法</h2>

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

<h3 id="属性值">属性值</h3>

<p>一个 <code>RequestMode</code> 值。</p>

<ul>
 <li><code>same-origin</code> — 如果使用此模式向另外一个源发送请求，显而易见，结果会是一个错误。你可以设置该模式以确保请求总是向当前的源发起的。</li>
 <li><code>no-cors</code> — 保证请求对应的 method 只有 <code>HEAD</code>，<code>GET</code> 或 <code>POST</code> 方法，并且请求的 headers 只能有简单请求头 (<a href="https://fetch.spec.whatwg.org/#simple-header">simple headers</a>)。如果 ServiceWorker 劫持了此类请求，除了 <a href="https://fetch.spec.whatwg.org/#simple-header">simple header</a> 之外，不能添加或修改其他 header。另外 JavaScript 不会读取 {{domxref("Response")}} 的任何属性。这样将会确保 ServiceWorker 不会影响 Web 语义(semantics of the Web)，同时保证了在跨域时不会发生安全和隐私泄露的问题。</li>
 <li><code>cors</code> — 允许跨域请求，例如访问第三方供应商提供的各种 API。预期将会遵守 <a href="/zh-CN/docs/Web/HTTP/Access_control_CORS">CORS protocol</a>  。仅有<a href="https://fetch.spec.whatwg.org/#concept-filtered-response-cors">有限部分</a>的头部暴露在 {{domxref("Response")}} ，但是 body 部分是可读的。</li>
 <li><code>navigate</code> — 表示这是一个浏览器的页面切换请求(request)。 navigate请求仅在浏览器切换页面时创建，该请求应该返回HTML。</li>
</ul>

<h4 id="默认模式">默认模式</h4>

<p>可以以多种方式发起请求，并且请求的模式取决于发起请求的特定方式。</p>

<p>例如，当一个 <code>Request</code> 对象以 {{domxref("Request.Request")}} 方式创建，该<code>Request</code> 的 <code>mode</code> 的值为 <code>cors</code> 。</p>

<p>然而，除了以 {{domxref("Request.Request")}} 创建的请求，模式通常为 <code>no-cors</code> 。例如，对与嵌入资源发起的请求，除非存在 <code><a href="/zh-CN/docs/Web/HTML/CORS_settings_attributes">crossorigin</a></code> 属性，即对于<span> {{HTMLElement("link")}} 、 {{HTMLElement("script")}} （除了和模块一起使用之外）、 {{HTMLElement("img")}}、 {{HTMLElement("audio")}}、 {{HTMLElement("video")}}、 {{HTMLElement("object")}}、 {{HTMLElement("embed")}}还有 {{HTMLElement("iframe")}} 元素，</span>在大多数情况下是使用 <code>no-cors</code> 模式<span>。</span></p>

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

<p>在下面代码段中，我们使用 {{domxref("Request.Request()")}} 创建请求（请求与脚本位于同一目录中的图像文件），然后将请求模式保存在一个变量中：</p>

<p>In the following snippet, we create a new request using theconstructor (for an image file in the same directory as the script), then save the request mode in a variable:</p>

<pre class="brush: js notranslate">var myRequest = new Request('flowers.jpg');
var myMode = myRequest.mode; // returns "cors" by default</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>{{Compat("api.Request.mode")}}</p>

<h2 id="参见">参见</h2>

<ul>
 <li><a href="/zh-CN/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
 <li><a href="/zh-CN/docs/Web/HTTP/Access_control_CORS">HTTP 访问控制（CORS）</a></li>
 <li><a href="/zh-CN/docs/Web/HTTP">HTTP</a></li>
</ul>