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
    评论
Vue 使用 AJAX 的跨域问题可以通过设置后端接口的 CORS 来解决。CORS 是一种机制,它使用一些 HTTP 头来让浏览器与服务器进行安全的跨源数据传输。在后端接口中设置如下 CORS 头: ``` Access-Control-Allow-Origin: * Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS Access-Control-Allow-Headers: Origin, Content-Type, Authorization, Accept, X-Requested-With ``` 其中,`Access-Control-Allow-Origin` 设置为 `*` 表示允许所有来源的请求。`Access-Control-Allow-Methods` 设置允许的 HTTP 方法,`Access-Control-Allow-Headers` 则设置允许的 HTTP 头。 除此之外,还可以在 VueAjax 请求中设置 `withCredentials: true`,表示跨域请求时携带 cookie,需要后端支持。同时,也可以在请求头中添加 `Authorization` 等自定义的 HTTP 头信息。 ``` axios.get(url, { withCredentials: true, headers: { Authorization: 'Bearer ' + token } }).then(res => { console.log(res.data) }) ``` 需要注意的是,在开发环境中,由于 Vue 开发服务器与后端服务器可能运行在不同的端口上,也会存在跨域问题。可以在 `vue.config.js` 中配置代理解决跨域问题: ``` module.exports = { devServer: { proxy: { '/api': { target: 'http://localhost:3000', changeOrigin: true } } } } ``` 以上代码的意思是,在开发环境中,将所有以 `/api` 开头的请求转发到 `http://localhost:3000`,并将请求头的 `Host` 字段设置为转发目标的主机名。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值