Question

当我们发送 fetch 请求时，返回的 response.type 可能是“basic”、“cors”或“opaque”中的一种。这些类型可以告知我们资源从何而来，这样就能知道该如何处理响应对象。

当我们请求的是同一域下的资源时，响应返回的类型为“basic”，此时没有任何限制，我们可以查看响应中的任何数据。

如果请求的是跨域资源，那么会返回一个 CORS 类型的头部，并且响应类型为“cors”。这种类型跟上面的“basic”非常相似，只是它对响应头部的字段访问有限制，你只可以访问这些属性：Cache-Control、Content-Language、Content-Type、Expires、Last-Modified 和 Pragma。

“opaque”类型的响应也是访问跨域资源的时候产生的，只是响应头不是 CORS 类型的响应头而已。如果是这种类型的响应，那么我们就不能读取返回的数据，也不能查看请求的状态码，这就意味着我们将无法确定请求是成功了还是失败了。目前在 fetch() 的实现中，无法请求跨域资源。

你可以为 fetch 请求定义 mode 属性，来保证只有符合条件的请求才会被处理。可以设置的 mode 属性值如下：

•“same-origin”只有请求同域下的资源才能成功，其他请求均被拒绝。

•“cors”允许请求同域或者跨域资源，但是跨域必须返回相应的跨域请求头部。

•“cors-with-forced-preflight”在发出实际请求前先做 preflight 检查。

•“no-cors”针对跨域资源做请求，但是不返回 CORS 的响应头，这是属于 opaque 类型的响应。如前文所述，目前还不能在 window 下使用。

在使用 mode 时，需要将 fetch 请求的第二个参数作为配置对象，并在其中配置具体的模式：

fetch('http://some-site.com/cors-enabled/some.json', {mode: 'cors
    '})
  .then(function(response) {
    return response.text();
  })
  .then(function(text) {
    console.log('Request successful', text);
  })
  .catch(function(error) {
    log('Request failed', error)
  });