部署至Azure的create-react-app拉取public目录JSON触发404

首先明确两个已验证的前提，避免无意义排查：

• Kudu控制台已确认test.json随项目成功部署到站点对应的wwwroot目录下的Data子文件夹
• 生产环境构建时process.env.PUBLIC_URL为空字符串，拼接生成的实际请求路径为/Data/test.json

1. React路由兼容重写规则过度拦截 #

Azure App Service托管静态站点时，为了让React BrowserRouter在页面刷新时不返回404，通常会配置URL重写规则，将所有非文件路径的请求转发到index.html。如果重写规则没有加静态资源排除项，会把/Data这类静态目录的请求也一并重写，最终返回404。
修复方式是在项目构建产物的根目录（即build文件夹）新增/调整web.config配置，在重写规则的条件里加入静态目录的排除逻辑，示例配置：

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="SPA Routes" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
            <!-- 新增排除：跳过Data目录下的所有静态资源，不做重写 -->
            <add input="{REQUEST_URI}" pattern="^/(Data)/" negate="true" />
          </conditions>
          <action type="Rewrite" url="/index.html" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

调整后重新部署，确保web.config文件和Data目录同步传到wwwroot路径下。

2. process.env.PUBLIC_URL的赋值误区 #

不需要手动为Azure环境单独配置process.env.PUBLIC_URL环境变量。CRA的生产构建逻辑默认就是：如果构建阶段没有手动设置该变量，就将其值置为空字符串，对应静态资源采用站点根相对路径，和Azure把静态文件放在wwwroot根目录的托管逻辑完全匹配。
如果手动给这个变量赋值为站点的完整域名，反而会生成带域名的绝对请求路径，容易触发跨域、路径不匹配的问题。

3. 路径大小写与权限问题 #

• 如果使用的是Linux版Azure App Service，服务器是严格区分文件路径大小写的：如果代码里请求路径是/Data/test.json，但实际部署的文件夹是小写的/data/test.json，哪怕文件内容完全一致，也会直接返回404。
• 可以直接在浏览器地址栏输入完整的JSON访问路径（https://你的站点域名/Data/test.json），直接判断返回结果：如果返回403说明是文件夹匿名读权限配置问题，调整回默认的匿名静态文件读权限即可；如果返回404就核对路径拼写和大小写。

4. 代码逻辑优化方便调试 #

当前fetch调用的逻辑没有做响应状态校验，也没有做JSON解析，建议调整为可自动抛出错误的版本，方便快速定位请求异常：

fetch(`${process.env.PUBLIC_URL || ''}/Data/test.json`, {
  headers: {
    'Content-Type': 'application/json',
    'Accept': 'application/json'
  }
})
  .then(res => {
    if (!res.ok) throw new Error(`请求异常，状态码：${res.status}`)
    return res.json()
  })

调整后如果出现路径错误，浏览器控制台会直接打印实际请求的状态码，不需要反复排查拼接逻辑。

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