目录
背景
一个基于 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 下面两种形式请求路径会不同：
以斜杠开始：service.get("/myapp/delete")，这种请情况下，请求路径是正常的，完整路径为 IP:port/myapp/delete。非斜杠开始：service.get("myapp/delete")，此时相对路径是当前路由 path ，最终的请求路径是 IP:port/path/myapp/delete ，无疑会导致 404 异常。启示录
开发过程中我写的 url 都是对应 Controller 层中的接口路径，今天这个路径问题是别的同事拷贝时没注意路径导致的。虽然是他人的错误，但是它引发了我对 axios 请求时相对路径的思考。
其实也比较好理解：没有 / 时，请求发送是相对当前请求路径的；而有前缀时，相对路径就成了应用根路径了。