Javascript fetch API中request.mode的要点是什么，特别是对于cors？

查看新的fetchapi，您可以在请求中指定一个mode字段。发件人：

然后如何使用它：

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;
});

我不明白为什么你需要具体说明一些在请求中不言而喻的东西？如果我是从客户端网站上的服务器请求资源，那么服务器没有要查看的源标题吗？这种模式不是只会引起混乱吗

---

此外，我还试图弄清楚什么样的目标

模式：同源
？“您可以使用它来确保始终向您的源站发出请求。”但是，如果您正在发送请求，或者如果其他开发人员可以访问代码，为什么不发送请求而不是一个字段来指示请求无效？
这与服务器无关；不管怎样，服务器都将获得请求。Fetch和XMLHttpRequest都是如此。如果您的服务器很幼稚，并且做了一些愚蠢的事情，不管是谁传递的，从哪里传递的，这都是它自己的错误，而这与防止这一点无关

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

考虑一个不做CORS头的服务器，它只是盲目地假设您位于同一个源，并返回JSON。。。
…现在，假设Fetch允许您跨源请求资源（它确实允许）

该模式规定，如果发出了此类请求，并且给出了此类响应，则有效负载对于获取请求的接收者应该是完全不透明的。。。这意味着你可以得到一个响应，就像你一直可以得到的一样，但是你不能让身体去解析或者使用它

这是一件大事，它既能让您跨来源发出请求，又能保持浏览器safer

它甚至还有一些实际的应用程序，比如预加载/预取数据，这些数据可能是某些主机API将要使用的（比如
或
），在这些应用程序中，这些接口被赋予了比JS运行的沙箱更大的访问外部数据的权限

这些相同类型的概念也适用于ServiceWorker和缓存不透明的blob，这些blob的来源显然不是您的来源（例如，在ServiceWorker级别缓存和服务Gravatar图像）。
设计的Fetch API公开了浏览器内部用于获取的相同原语

模式
就是这些原语之一。它不仅用于Fetch规范中定义Fetch API的部分，因为Fetch规范和定义JavaScript API的同时，还定义了浏览器如何在内部处理各种获取的低级算法

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

例如，根据HTML规范，以下是：

若要获取经典工作脚本，请在给定url的情况下获取
客户端设置对象、目标和脚本设置对象，
运行这些步骤。该算法将以null（失败时）或新值异步完成
（关于成功）

让请求成为一个新的，其为url，为获取客户端设置对象，为目标，为“
同源
”，为“
同源
”，为“
未插入解析器
”，且其为已设置
请特别注意«让请求成为一个新的»和«是“
同源的
”»部分-请注意，用于goes to的超链接和用于goes to的超链接

因此HTML规范需要为请求设置“
同源
”模式，以便指定浏览器在进行某种类型的获取时在内部使用的行为

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

您可能永远不会发现需要Fetch API公开的所有各种模式—您不太可能想要使用
导航
模式—但它们都在那里，因为它们代表了任何给定Fetch场景所需的完整模式集（包括仅可能由浏览器内部使用的场景）

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;
});