1、关于跨域问题的简单概述
跨域问题:当我们的浏览器从一个域名的网页去请求另一个域名的资源时,其中域名、端口、协议任一不同,都是属于跨域
2、关于ajax跨域可能会遇到的问题
1)请求被拦截
2)每次请求的session都不同
示例:
如下列顺序点击按钮,验证码按钮为src发起的请求,登录按钮为ajax请求
javaweb后端输出结果如图:
src请求的sessionid与ajax请求的不一致,两次ajax请求的sessionid也不一致。
3、解决方法
vue前端
1)在main.js中添加 axios.defaults.withCredentials = true; 解决sessionId不一致的问题
注意:在chrome浏览器请求仍然有可能被拦截,导致sessionId不一致。可以在其他浏览器测试。
javaweb后端
1)在servlet添加代码如下图:
//将http://127.0.0.1:5173改为你的主机地址,注意设置为*会被拦截,主机地址如下文所述,切勿添加额外的路径如http://127.0.0.1:5173/,http://127.0.0.1:5173/login等.
resp.setHeader("Access-Control-Allow-Origin", "http://127.0.0.1:5173");//允许跨域的主机是哪一个 *表示所有的主机
resp.setHeader("Access-Control-Allow-Credentials", "true");//是否允许https跨域
resp.setHeader("Access-Control-Allow-Methods", "*");//允许哪种请求方式
resp.setHeader("Access-Control-Max-Age", "3600");//允许多久
resp.setHeader("Access-Control-Allow-Headers", "Authorization,Origin,X-Requested-With,Content-Type,Accept,"
+ "content-Type,origin,x-requested-with,content-type,accept,authorization,token,id,X-Custom-Header,X-Cookie,Connection,User-Agent,Cookie,*");//允许哪些头