Question

查看新的fetch API，您可以在请求中指定模式字段。来自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上的http://client.com服务器请求资源，服务器是否具有要查看的原始标头？这种模式不会造成混乱吗？

此外，我想弄清楚mode: same-origin甚至会服务的目标是什么？ “您可以使用它来确保始终向您的来源发出请求。”但是如果您要发送请求，或者其他开发人员可以访问该代码，为什么不能你只是没有发送请求而不是字段来表明它是无效的？

Answer 1

它与服务器无关;无论如何，服务器都会收到请求。对于Fetch和XMLHttpRequest也是如此。如果你的服务器是天真的并做了一些愚蠢的事情，不管是谁传递了什么，从哪里来，这都是它自己的错，这与防止它有关。

它与客户端将让您看到响应的内容以及发送到服务器的内容（通过标头的凭据以及credentials字段）有关。

考虑一个不执行CORS标头的服务器，但只是盲目地假设您处于同一个源，并返回JSON ... ...现在，假设Fetch允许您跨越原点请求资源（确实如此）。

模式规定如果发出这种请求，并且给出了这种响应，那么有效载荷应该对Fetch请求的接收者完全不透明......这意味着你可以得到一个响应，只是就像你一直可以，但你实际上无法让身体解析或使用它。

这既是一个大问题，也可以让您能够跨越原点提出请求，以及保持浏览器安全呃。

它甚至还有实际的应用程序，例如预加载/预取数据，这可能是某些主机API将要使用的（如<img>或<video>），其中这些接口被授予更多访问权限外国数据，而不是JS运行的沙箱。

这些相同类型的概念也适用于ServiceWorkers并缓存不明原因的起源的不透明blob（例如，在服务工作者级别缓存和提供Gravatar图像）。

Answer 2

Fetch API设计公开了浏览器用于内部提取的相同原语。

mode是其中一个基元。并且它不仅仅用于定义Fetch API的Fetch规范部分 - 因为Fetch规范以及定义JavaScript API，还定义了浏览器如何在内部处理各种类型的提取的低级算法。

规范中定义的浏览器内部算法（如HTML规范）引用了Fetch规范中的低级算法，并依赖于设置mode和其他方面的提取。

例如，根据HTML规范，这里是the start of the fetch a classic worker script algorithm：

获取经典工作人员脚本给定网址，获取     客户端设置对象，目标和脚本设置对象，     运行这些步骤。该算法将以null（失败时）或新的异步完成     classic script（成功时）。


让请求成为request url 的新url，client 获取客户端设置对象< / em>，destination是目的地，mode是“same-origin”，credentials mode是“same-origin”，{{3 }是“not parser-inserted”，其parser metadata已设置。

特别注意«让请求是新的use-URL-credentials flag»而«request是“same-origin” »部分 - 并注意mode的超链接转到request，https://fetch.spec.whatwg.org/#concept-request的超链接转到mode。

因此HTML规范需要对请求进行“same-origin”模式设置 - 以便指定浏览器在进行某种类型的提取时内部使用的行为。

这就是Fetch规范需要为具有特定模式的提取提供的原因。除此之外，Fetch API提供设置“same-origin”模式的能力的原因（如上所述）与允许您作为Web开发人员访问与浏览器相同的原语的目标保持一致在提取时可以进行内部访问。

您可能永远不会觉得需要Fetch API公开的所有各种模式 - 您很可能不想使用navigate模式 - 但它们仍然存在，因为它们代表完整任何给定获取方案所需的一组模式（包括内部浏览器可能只使用的方案）。

fetch API中的request.mode有什么意义，特别是关于cors？

2 个答案: