fetch解读

Fetch API 提供了一个 JavaScript 接口，用于拜访和操纵 HTTP 管道的一些具体局部，例如申请和响应。它还提供了一个全局 fetch() 办法，该办法提供了一种简略，正当的形式来跨网络异步获取资源。这种性能以前是应用 XMLHttpRequest 实现的。Fetch 提供了一个更现实的代替计划，能够很容易地被其余技术应用，例如Service Workers。

[问题]fetch申请中的跨域和携带Cookies问题

在有些申请中会遇到心愿通过申请来拜访不同源的api，并且心愿携带cookies。

解决跨域问题

fetch能够设置不同的模式使得申请无效. 模式可在fetch办法的第二个参数对象中定义.

fetch(url, {mode: 'cors'});

能够定义的模式如下：

  • same-origin:示意同源能够进行拜访，反之浏览器回绝
  • cors: 示意同源和带有cors响应头的跨域能够申请胜利，其余回绝
  • cors-with-forced-preflight: 示意在发出请求前, 将执行preflight查看.
  • no-cors: 示意跨域申请不带cors响应头场景，此时的相应类型为opaque，然而在opaque的返回类型中，咱们简直不能查看到任何有价值的信息，比方不能查看response, status, url。

解决跨域携带cookies问题

跨域申请中须要带有cookie时, 可在fetch办法的第二个参数对象中增加credentials属性, 并将值设置为”include”.

fetch(url,{  credentials: 'include'});

除此之外, credentials 还能够取以下值:

  • omit: 缺省值, 默认为该值.
  • same-origin: 同源, 示意同域申请才发送cookie.

然而同时须要指标服务器能够承受承受跨域发送cookies申请，否则会被浏览器的同源策略阻挡
服务器端须要反对Access-Control-Allow-Credentials策略,服务器同时设置Access-Control-Allow-Credentials响应头为"true"， 即可容许跨域申请携带 Cookie。