问题描述
实现一个验证码的功能,前后端分离,前端 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的问题