尝试从部署的 create-react-app 中的 public 文件夹中获取 json 文件时出现 404 错误

Question

我的 React 项目 public 文件夹中有一个 json 文件，如下所示

public
|
|___Data
    |   test.json

在我的 .tsx 文件中，我引用了这样的文件

fetch(`${process.env.PUBLIC_URL}/Data/test.json`,
    {
     headers : {
         'Content-Type': 'application/json',
         'Accept': 'application/json'
     }
})
 .then(response => response)

这在开发中以及在本地构建和提供应用程序 (npm 运行 build) 时效果很好。但是当我尝试部署到我的 Azure Web 应用程序服务时，该站点对该文件抛出 404 错误。

我还可以在 Kudu 调试控制台中看到该文件，所以我知道它正在与项目一起部署。

向控制台打印 process.env.PUBLIC_URL 会产生一个空字符串。我是否需要使用环境变量将此值设置为某个值？我的应用服务配置是否还缺少其他内容？

我看过其他类似的问题，即，但解决方案对我也不起作用。

Answer 1

最新

React客户端工程本质上是在客户端浏览器上运行下载一段代码，不会涉及到Azure应用设置。所以它的 process.env 无法读取任何 azure 环境变量。

最新更新的答案可以作为您的选择。经过大量测试，发现在react项目中，.tsx文件中的process.env和全局的

不一样

import * as React from 'react';
const {env} = process;
...
public getJsonDataStr = () => {
    const urlBy: string = this.props.urlBy!;
    const url = this.state.url + urlBy + env.REACT_APP_PUBLIC_URL;
    this.setState({ url });
};

更多详情, you can download my sample code.

在项目中创建 .env 文件。
npm 运行构建并部署构建文件夹。
测试一下。

原始

方法一

您可以在门户网站 Application settings 中设置 PUBLIC_URL。

测试步骤：

在门户上配置。
打开scm站点，点击Environment。
打开 ssh，运行命令。

方法二

尝试使用 process.env.WEBSITE_HOSTNAME 而不是 process.env.PUBLIC_URL。

尝试从部署的 create-react-app 中的 public 文件夹中获取 json 文件时出现 404 错误

404 Error when trying to fetch json file from public folder in deployed create-react-app

reactjs

azure-web-app-service

create-react-app

方法一

方法二