Apache服务器上React Router路由无法获取静态JSON文件问题

问题根源 #

子路由下用相对路径./resources/data/config.json请求时，浏览器会基于当前路由路径（比如/user/profile）解析成/user/resources/data/config.json，这个路径不存在，加上你配置的.htaccess会把所有不存在的请求重定向到index.html，所以返回了页面内容。根路由下相对路径解析正确，所以能拿到JSON。

解决方案 #

1. 使用绝对路径请求JSON

把axios请求的路径改成带根斜杠的绝对路径：

axios.get('/resources/data/config.json')

不管当前在哪个子路由，这个路径都会直接指向服务器根目录下的对应静态文件，不会受路由层级影响。

如果项目部署在Apache的子路径（比如http://your-domain.com/react-app/），要加上子路径前缀：

axios.get('/react-app/resources/data/config.json')

或者利用React的PUBLIC_URL环境变量自动适配：

axios.get(`${process.env.PUBLIC_URL}/resources/data/config.json`)

注：PUBLIC_URL的值可以在打包时通过package.json的homepage字段设置，比如"homepage": "/react-app/"，打包后会自动注入这个变量。

2. 修正.htaccess配置，排除静态资源重定向

确保你的.htaccess只对不存在的文件/目录进行重定向，放过真实存在的静态资源。修改后的配置示例：

RewriteEngine On
# 如果请求的是实际存在的文件或目录，直接返回，不触发重定向
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
# 其他所有请求转发到index.html，支持React Router的前端路由
RewriteRule ^ /index.html [L]

这个配置会先检查请求的路径是否对应服务器上真实存在的文件或文件夹，如果是就直接访问，否则才转发到index.html，这样静态JSON文件的请求就不会被重定向了。

3. 验证静态资源路径

打开浏览器开发者工具的「Network」标签，查看JSON请求的实际URL：

• 如果返回404，说明路径写得不对，调整路径前缀
• 如果返回200但内容是HTML，说明.htaccess的静态资源排除规则没生效，检查配置是否正确

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