构建React应用后无法获取JSON配置文件的问题咨询

问题根源 #

React构建后的静态应用，若服务器配置了前端路由 fallback（所有请求指向index.html），会导致直接请求根目录下的appsettings.json时，服务器误将其当作路由请求转发到index.html，从而返回404。另外，部署路径不匹配也可能引发路径错误。

解决方法 #

1. 调整服务器静态文件路由规则 #

根据你使用的服务器，添加对应规则，优先返回存在的静态文件，再处理前端路由：

Nginx配置

在站点的location块中添加：

location / {
  # 先尝试返回请求的文件/目录，不存在再转发到index.html
  try_files $uri $uri/ /index.html;
}

# 单独配置json文件的缓存策略（方便后续修改生效）
location ~* \.json$ {
  expires -1;
  add_header Cache-Control "no-cache, no-store, must-revalidate";
}

Apache配置

在项目根目录的.htaccess文件中添加：

RewriteEngine On
RewriteBase /

# 跳过index.html本身
RewriteRule ^index\.html$ - [L]
# 若请求的不是存在的文件/目录，再转发到index.html
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

IIS配置

在站点根目录的web.config中添加重写规则：

<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="React Routes" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <!-- 跳过已存在的文件和目录 -->
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="/index.html" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

2. 修正fetch请求路径（若部署在子路径） #

如果你的应用部署在域名的子路径下（比如https://xxx.com/my-app/），使用React内置的PUBLIC_URL变量确保路径正确：

const appsettingsResponse = await fetch(`${process.env.PUBLIC_URL}/appsettings.json`);
const appsettings = await appsettingsResponse.json();

PUBLIC_URL会自动匹配你通过package.json中homepage字段设置的部署路径，避免相对路径错误。

3. 确保配置修改后生效 #

修改appsettings.json后：

• 若服务器配置了json文件不缓存（如上面Nginx的配置），只需重启站点服务器，用户刷新浏览器即可生效。
• 若未配置缓存，需要强制用户刷新浏览器（Ctrl+F5），或者重启服务器后清除浏览器缓存。

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