axios 的发送请求时 url 的相对路径是怎么决定的？

Posted 2022-01-22 毕小宝

背景

一个基于 React + SpringBoot 实现的前后端分离的项目，联调的时候发现 axios 发送请求时 url 错误。本文分析 axios 在生产环境下发送请求时，url 相对路径是什么的问题。

axios 配置

前后端分离开发时，通常在 axios 配置文件中根据环境变量配置 baseUrl 属性：

const ADDRESS = `$hostname:$port`;
let baseURL = `http://$ADDRESS`;

// 生产环境时，根路径设置为空
if (process.env.NODE_ENV === 'production') 
    baseURL = '';


// 创建axios实例
const service = axios.create(
    baseURL: baseURL, // api的base_url
    timeout: 50000,
    changeOrigin: true, //跨域
    withCredentials: true, // 跨域携带cookie
)

整个应用通过该封装的实例来发送 ajax 请求。

实际请求 url

封装的 API 中调用 service 实例向后台发送请求：

service.get(url, params)

这个 url 的值，有前缀 “/” 和没有时，请求路径是有差距的。

例如：一个删除接口后台路径是 /myapp/delete 下面两种形式请求路径会不同：

1. 以斜杠开始：service.get("/myapp/delete")，这种请情况下，请求路径是正常的，完整路径为 IP:port/myapp/delete。
2. 非斜杠开始：service.get("myapp/delete")，此时相对路径是当前路由 path ，最终的请求路径是 IP:port/path/myapp/delete ，无疑会导致 404 异常。

启示录

开发过程中我写的 url 都是对应 Controller 层中的接口路径，今天这个路径问题是别的同事拷贝时没注意路径导致的。虽然是他人的错误，但是它引发了我对 axios 请求时相对路径的思考。

其实也比较好理解：没有 / 时，请求发送是相对当前请求路径的；而有前缀时，相对路径就成了应用根路径了。