在vue中使用代理地址出现将代理拦截地址拼接到了接口请求中的情况

代理的代码:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
问题:
请求成功,但是报错了
在这里插入图片描述
后台log中出现找不到:
在这里插入图片描述
原因是请求中拼接了代理
解决方案:
在代理中添加如下:
在这里插入图片描述

pathRewrite: {
            '^/shipperweb-api': '/'  // 重写请求,比如我们源访问的是shipperweb-api,那么请求会被解析为/
          }
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以使用axios库来进行请求拦截和响应拦截,然后在Vue3使用alova来封装这些拦截器。 首先安装axios和alova库: ``` npm install axios --save npm install aloba --save ``` 然后在项目创建一个api.js文件,用来封装axios请求和响应拦截: ```javascript import axios from 'axios'; import { createApi } from 'aloba'; // 创建axios实例 const instance = axios.create({ baseURL: 'http://localhost:3000', }); // 请求拦截器 instance.interceptors.request.use((config) => { // 在请求添加token等信息 config.headers.Authorization = 'Bearer ' + localStorage.getItem('token'); return config; }); // 响应拦截器 instance.interceptors.response.use((response) => { // 如果响应状态码为401,则跳转到登录页 if (response.status === 401) { location.href = '/login'; } return response.data; }); // 将axios实例传入createApi,创建一个api实例 const api = createApi(instance); export default api; ``` 在上面的代码,我们首先创建了一个axios实例,并对其进行了请求拦截和响应拦截。然后将该实例传入到alova的createApi方法,创建一个api实例,并使用export default导出。 然后在Vue3组件使用该api实例来发送请求: ```javascript import api from './api.js'; export default { async mounted() { try { const res = await api.get('/user'); console.log(res); } catch (error) { console.log(error); } }, }; ``` 在上面的代码,我们首先引入了刚才封装好的api.js文件,并使用该实例发送了一个get请求。由于我们在响应拦截对响应进行了处理,所以我们可以直接拿到响应数据,而不是整个响应对象。 这样,我们就可以在Vue3使用alova封装请求拦截和响应拦截了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值