React代理环境下带参数路由导致Axios请求URL异常求助

问题原因 #

当路由配置为/confirmation/:token时，当前页面URL为http://localhost:3000/confirmation/xxx（末尾带斜杠层级结构），此时用相对路径api/token/${token}发起请求，浏览器会将其解析为当前路径的子路径，即/confirmation/api/token/xxx，而非预期的根路径下的/api/token/xxx。

而路由不带参数时，页面URL为http://localhost:3000/confirmation（无末尾斜杠），相对路径api/...会被解析为根路径下的请求，因此能正常工作。

解决方案 #

方案1：使用绝对路径（最直接） #

修改Axios请求路径，在开头添加斜杠/，强制从根路径解析：

const response = await axios.get(`/api/token/${token}`)

方案2：配置Axios全局baseURL #

在项目初始化Axios的位置（比如单独的axios配置文件）设置baseURL，确保所有请求都基于根路径：

import axios from 'axios';

axios.defaults.baseURL = '/';
// 也可明确指定后端地址：axios.defaults.baseURL = 'http://localhost:3000/';

之后请求时直接写相对路径即可：

const response = await axios.get(`api/token/${token}`)

方案3：统一路由路径的末尾斜杠（可选） #

在React Router中给路由路径添加末尾斜杠，保证URL结构一致：

<Route path="/confirmation/:token/" element={<Confirmation />} />

但这种方式需要确保所有跳转和URL访问都带末尾斜杠，可靠性不如前两种方案。

内容的提问来源于stack exchange，提问作者Mujtaba Shafiq