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

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值