javascript - fetch API 中的 request.mode 有什么意义，尤其是对于 cors？

Question

查看新的获取 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 ，服务器没有origin header可以看吗？这种模式不会造成困惑吗？

此外，我正在尝试弄清楚 mode: same-origin 的目标是什么？ “您可以使用它来确保始终向您的来源发出请求。”但是如果您要向外发送请求，或者如果其他开发人员可以访问代码，为什么不呢？你只是不发送请求而不是一个字段来表明它是无效的？

Answer 1

与服务器无关；无论如何，服务器都会收到请求。 Fetch 和 XMLHttpRequest 也是如此。如果您的服务器很天真并且做了一些愚蠢的事情，无论是谁从哪里传递什么，那都是它自己的错，这与防止这种情况无关。

它与客户端让您看到响应的内容以及发送到服务器的内容有关(根据通过 header 的凭据，结合 credentials 字段)。

考虑一个不执行 CORS header 的服务器，但只是盲目地假设您来自同一来源，并返回 JSON......现在，假设 Fetch 允许您跨源请求资源(确实如此)。

该模式规定，如果发出这种请求，并给出这种响应，则有效负载对于 Fetch 请求的接收者应该是完全不透明的……这意味着您可以获得响应，只是就像您一直可以做的那样，但实际上您无法让主体解析或使用它。

这是一个大问题，既允许您能够跨源发出请求，又能保证浏览器安全er。

它甚至有实际应用，例如预加载/预取数据，也许某些主机 API 将要使用(如 <img> 或 <video> )，这些接口(interface)比运行 JS 的沙箱。

这些相同类型的概念也适用于 ServiceWorkers 和缓存不透明的 blob 以获取绝对不是您的来源的来源(例如，在服务 worker 级别缓存和提供 Gravatar 图像)。