关于前端:fetch请求中的跨域和携带Cookies问题

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。