解决vue3使用axios发送请求的链接被路由修改

最新推荐文章于 2024-05-08 15:29:16 发布

qq_46109049

最新推荐文章于 2024-05-08 15:29:16 发布

阅读量709

点赞数 9

文章标签：前端 vue.js

本文链接：https://blog.csdn.net/qq_46109049/article/details/135923198

版权

问题描述：

使用axios发送信息url为`api/funcion`
然而在`http://localhost:5173/A/B`页面中发送的是`http://localhost:5173/A/api/function`
然而在`http://localhost:5173/A`页面中发送的是`http://localhost:5173/api/function`
期待发送`http://localhost:5173/api/function`

问题分析：

我在发送请求时使用了相对路径 'api' + url，这会导致请求路径与页面路由相关联。为了确保请求发送到期望的地址，应该要使用绝对路径来发送请求。

问题解决：

// 在发送请求的地方，动态构建请求路径
const baseUrl = 'http://localhost:5173/api'; // 基础 URL
axios.get(baseUrl + requestUrl)
  .then(response => {
    // 请求成功处理逻辑
  })
  .catch(error => {
    // 请求失败处理逻辑
  });

或者

const config = {
    method: method,
    url: '/api'+url,//出错地方，未加"/"导致请求路径与页面路由相关联
        ......
    };

const response = await axios.default(config);