vue3关于ajax跨域请求问题

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,*");//允许哪些头