axios.get设置header跨域_前端应该知道的cors web跨域细节

本文将要讲什么

什么是cors跨域、细节
cors跨域带cookie的细节
结合 demo（zhiguangphoenix/cors-demo）

前提知识和背景

1. 知道什么是跨域，什么是同源策略，跨域的限制等等
2. 知道除cors外常见的跨域实现

前段时间在工作中接了一个小的后端服务的需求，做的过程中可能需要接入跨域带cookie的方案，于是深入的了解了一下cors跨域带cookie的细节，之前只是比较粗浅的了解。

cors跨域

先运行项目，通过本地的两个端口来模拟两个不同的域，打开http://127.0.0.1:8080/注意：

• 下图的script.src地址是在向另一个域种cookie，应该设置为本机的IP地址，如果设置为127.0.0.1，无法看到跨域带cookie的效果

• 下图跨域带cookie的ajax请求URL不能再向127.0.0.1发起，因为host一样的话会带上cookie，看不出来效果，所以在fe.html中改为本地IP地址即可.

npm run start:be;npm run start:fe

分别点击跨域简单请求和跨域非简单请求（request中加了header：X-header=notsimple），控制面板network会看到:

跨域简单请求发送了一个请求（GET）：

跨域非简单请求发送了两个请求（OPTIONS和GET）：

看下Wikipedia怎么说：cors跨域（wikipedia）是一种跨域的解决方案，具体来说分为两种，简单请求和非简单请求。

图片来自Wikipedia

图片来自https://www.w3.org/TR/cors/#simple-method

简单请求：请求方法是简单方法且请求头是简单头

• 简单方法：GET、HEAD、POST
• 简单头：Accept，Accept-Language，Content-Language 或 Content-Type是application/x-www-form-urlencoded，multipart/form-data或text/plain

对于简单请求：只有一次请求

request发一次请求：
    Origin=发起请求域的域名
response返回：
    Access-Control-Allow-Origin: * // 此时暂时设为*

对于非简单请求：一次preflight请求和一次真正的请求

request发一次preflight请求（OPTIONS）：
    Access-Control-Request-Headers: x-header //自定义的头部
    Access-Control-Request-Method: GET // 接下来真正请求的method
response返回：
    Access-Control-Allow-Headers: x-header
    Access-Control-Allow-Methods: GET,HEAD,PUT,PATCH,POST,DELETE
    Access-Control-Allow-Origin: *
request发一次真正的请求：
    X-header: notsimple
    Origin=发起请求域的域名
response返回：
    Access-Control-Allow-Origin: *

cors跨域带cookie

点击跨域带cookie会看到控制台报错：

错误提示：请求带有withCredentials=true时，response的Access-Control-Allow-Origin不能为*

代码server.js中修改如下，然后点击跨域带cookie按钮

浏览器控制台报错如下：

错误提示：withCredentials=true的时候response的Access-Control-Allow-Credentials必须为true

代码server.js中做修改如下，然后点击跨域带cookie按钮

这次成功返回了：

总结一下，跨域带cookie细节如下：

ajax request设置withCredentials=true
response设置headers：
    Access-Control-Allow-Origin=发起请求的origin
    Access-Control-Allow-Credentials: true

后记

前端多了解后端，更好更清晰

---

欢迎关注我的公众号，前端亚古兽，做前端，不止于做前端。