React配置代理后页面刷新时axios请求的:id被替换为index.css是什么原因

问题根源 #

问题核心是index.html中静态资源使用了相对路径引用，搭配React路由的嵌套路径 + 全局代理配置共同导致的异常：

1. 你在index.html中用./index.css这个相对路径引用样式文件，当你刷新/document/:id这类二级及以上层级的路由页面时，浏览器会把相对路径解析为当前路由路径下的资源，也就是/document/index.css，而非根目录下的index.css。
2. 配置全局代理后，所有前端无法匹配到本地静态资源的请求都会被转发到后端3001端口，而你的后端刚好存在/document/:id的路由规则，因此index.css就被识别成了:id参数。
3. 未配置代理的旧版本不会触发问题，是因为当时只有你主动硬编码为3001端口的请求才会发送到后端，静态资源请求默认走3000端口的本地public目录，就算路径解析错误也不会跑到后端路由中。

解决方法 #

• 把index.html中所有静态资源的相对路径引用改为绝对路径，将<link rel="stylesheet" href="./index.css" />修改为<link rel="stylesheet" href="/index.css" />，去掉路径开头的.，这样无论在哪一层路由下，浏览器都会统一请求根目录下的对应静态资源，不会拼接当前路由路径。
• 优化代理规则，不要使用全局代理。可以安装http-proxy-middleware自定义代理规则，只把特定前缀（比如/api/开头）的接口请求转发到后端，避免静态资源请求被误转发到后端。
• 如果使用Create React App搭建项目，确保package.json中的homepage字段配置为"/"，避免打包后静态资源默认使用相对路径。

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