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。