版权声明：欢迎转载，转载请注明来源，谢谢！ https://blog.csdn.net/a8725585/article/details/81627037
浏览器对于javascript的同源策略（请求的url地址,必须与浏览器上的url地址处于同域上,也就是域名,端口,协议相同.）的限制,例如a.cn下面的js不能调用b.cn中的js,对象或数据(因为a.cn和b.cn是不同域),但是在前后端分离时我们经常会把服务端和前端放到不同域上，这时就需要跨域了.今天记录的是cookie的跨域访问。
问题
在此之前一直以为传统的服务器使用session保存用户信息的方案在前后端分离时不能使用，无法获取请求的状态。
后面经过了解发现http本身就是无状态的，传统的session保存法也是因为服务端生成一个id返回给客户端保存在cookie中，客户端请求数据时将其通过请求头发给服务端，服务端再通过id找到具体数据即可。因此再跨域时只需能操作cookie就可以使用session了。恰好XMLHttpRequest对象提供了跨域接口withCredentials:跨域请求是否提供凭据信息(cookie、HTTP认证及客户端SSL证明等)。
实现
设置withCredentials开启需要服务器同意同时需要在AJAX请求中打开withCredentials属性
- 客户端
axios.defaults.withCredentials = true // 全局设置
axios.post('/kaptcha/getinspectKaptchaImage', { kaptcha: this.verify },{withCredentials:true}) // 局部设置
- 服务端
/*在响应头中设置方法*/
Access-Control-Allow-Credentials: true // 设置响应头
/*koa中设置方法*/
app.use(cors({credentials:true})); // koa2中中间件cors设置
注意事项
- 服务端在设置cookie时指定的域名为服务器所在域名
- 需要关闭mockjs的模拟数据功能