fetch API 中的 request.mode 有什么意义，尤其是在 cors 方面?

问题描述

查看新的 fetch API，您可以在请求中指定模式字段.来自 Mozilla:

Looking at the new fetch API, you can specificy a mode field in the request. From Mozilla:

The mode read-only property of the Request interface contains the mode 
of the request (e.g., cors, no-cors, same-origin, or navigate.) This is 
used to determine if cross-origin requests lead to valid responses, and 
which properties of the response are readable.

然后是如何使用它:

var myHeaders = new Headers();

var myInit = { method: 'GET',
           headers: myHeaders,
           mode: 'cors',
           cache: 'default' };

fetch('flowers.jpg', myInit).then(function(response) {
  return response.blob();
}).then(function(myBlob) {
  var objectURL = URL.createObjectURL(myBlob);
  myImage.src = objectURL;
});

我不明白您为什么需要具体说明在请求本身中如此不言自明的内容?如果我从客户端网站 http://foo.com 服务器请求资源/client.com" rel="noreferrer">http://client.com，服务器没有源头可以看吗?模式不会只会引起混乱吗?

I don't understand why would you would need to specificy something that is so self evident in the request itself? If I was requesting a resource from http://foo.com servers on the client website http://client.com, doesn't the server have the origin header to look at? And wouldn't the mode only cause confusion?

此外，我想弄清楚 mode: same-origin 甚至可以达到什么目标?您可以使用它来确保始终向您的源发出请求." 但是，如果您正在发送请求，或者如果其他开发人员有权访问代码，为什么不你只是不发送请求而不是一个字段来表明它是无效的?

Furthermore I'm trying to figure out what goal mode: same-origin would even serve? "You could use this to ensure that a request is always being made to your origin." But if you're sending a request out, or if another developer has access to the code, why wouldn't you just not send the request instead of a field to indicate it's invalid?

推荐答案

Fetch API 在设计上公开了浏览器内部用于获取的相同原语.

The Fetch API by design exposes the same primitives that browsers use for fetches internally.

mode 是这些原语之一.而且它不仅仅用于 Fetch 规范中定义 Fetch API 的部分——因为 Fetch 规范除了定义 JavaScript API 之外，还定义了浏览器如何在内部处理各种类型的获取的低级算法.

mode is one of those primitives. And it’s not just used in the part of the Fetch spec that defines the Fetch API — because the Fetch spec, along with defining that JavaScript API, also defines low-level algorithms for how browsers handle fetches of various kinds internally.

在 HTML 规范等规范中定义的浏览器内部算法引用了 Fetch 规范中的那些低级算法，并依赖于设置 mode 和 fetch 的其他方面.

Browser-internal algorithms defined in specs such as the HTML spec reference those low-level algorithms in the Fetch spec, and rely on setting the mode and other aspects of the fetch.

例如，在 HTML 规范中，获取一个经典的工作脚本 算法开始于:

For example, in the HTML spec, the fetch a classic worker script algorithm starts with this:

要获取一个经典的工作脚本，给定一个 url，一个 fetch客户端设置对象、目的地和脚本设置对象，运行这些步骤.该算法将使用 null(失败时)或新的异步完成经典脚本(成功时).

To fetch a classic worker script given a url, a fetch client settings object, a destination, and a script settings object, run these steps. The algorithm will asynchronously complete with either null (on failure) or a new classic script (on success).

1. 让request成为一个新的requesturl 是 url，client 是获取客户端设置对象，destination 是 destination，mode 是same-origin", 凭证模式是same-origin"，解析器metadata 是not parser-inserted"，并且其 use-URL-credentials flag 已设置.

1. Let request be a new request whose url is url, client is fetch client settings object, destination is destination, mode is "same-origin", credentials mode is "same-origin", parser metadata is "not parser-inserted", and whose use-URL-credentials flag is set.

注意 Let 请求 成为一个新的 请求和模式 是same-origin" 部分 - 请注意 请求 转到 https://fetch.spec.whatwg.org/#concept-request 和 mode 的超链接 转到 https://fetch.spec.whatwg.org/#概念请求模式.

Note the Let request be a new request and mode is "same-origin" parts —and notice that the hyperlink for request goes to https://fetch.spec.whatwg.org/#concept-request and the hyperlink for mode goes to https://fetch.spec.whatwg.org/#concept-request-mode.

所以 HTML 规范需要same-origin".请求的模式设置——为了指定浏览器在进行某种类型的获取时在内部使用的行为.

So the HTML spec has need for the "same-origin" mode setting for requests — in order to specify behavior that browsers use internally when making a certain type of fetch.

这就是为什么 Fetch 规范需要为 fetch 提供特定模式的原因.除此之外，Fetch API 提供了设置same-origin"功能的原因.模式(如上所述)与允许您作为 Web 开发人员访问相同原语的目标保持一致(如上所述)在进行提取时，浏览器可以在内部访问这些原语.

And that kind of thing is why the Fetch spec needs to provide for fetches to have particular modes. Along with that, the reason the Fetch API provides the ability to set the "same-origin" mode is (as mentioned above) in keeping with the goal of allowing you as a web developer to have access to the same primitives browsers have access to internally when making fetches.

您可能永远不会发现需要 Fetch API 公开的所有各种模式 - 您不太可能想要使用 navigate 模式 - 但它们都在那里，因为它们表示任何给定提取场景所需的完整模式集(包括仅可能由浏览器内部使用的场景).

You may not ever find need for all the various modes the Fetch API exposes — it’s pretty unlikely you’d ever want to use the navigate mode —but they’re all there nonetheless, because they represent the complete set of modes that are needed for any given fetch scenario (including scenarios that are only ever likely to be used by browsers internally).

这篇关于fetch API 中的 request.mode 有什么意义，尤其是在 cors 方面?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！