解决跨域请求无法携带Cookie的问题

问题描述

实现一个验证码的功能，前后端分离，前端 vue + axios 请求后端接口。服务端返回一个验证码的图片同时将验证码存入session。

问题原因

在提交验证的时候出现了无法取到session的问题，因为前端工程单独启动后的端口（localhost:8080）和后端服务采用的的端口(localhost:8000)不一致形成了跨域。http协议本身是无状态的，需要凭证识别客户端身份，而跨域请求又限制携带cookie等凭证，这么一来服务端便无法识别来访对象，也就无法取到保存在session中的内容。

默认情况下，跨源请求不提供凭据(cookie、HTTP认证及客户端SSL证明等)
如果发送的是带凭据的请求，但服务器的相应中没有相关的头部，那么浏览器就不会把相应内容交给JavaScript,请求就无法得到结果的数据（浏览器得到了，但是我们请求的方法得不到，因为被浏览器拦截了）

解决方法

后端

// 响应头表示是否可以将对请求的响应暴露给页面
Access-Control-Allow-Credentials: true
// 允许跨域操作的具体域名
Access-Control-Allow-Origin: "http://localhost:8080"
// 允许跨域的HTTP方法
Access-Control-Allow-Methods: ["GET","POST","DELETE"]
// 列出将会在正式请求的 Access-Control-Expose-Headers 字段中出现的首部信息
Access-Control-Allow-Headers: ["Content-Type", "Authorization", "Accept"]

前端

表示跨域请求时是否需要使用凭证
axios.defaults.withCredentials = true

解决方法参考：
解决CORS跨域不能传递cookies的问题