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

IT技术 reactjs azure-web-app-service create-react-app

2021-05-13 22:51:51

我的react项目公共文件夹中有一个 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 run build）。但是，当我尝试部署到 Azure Web 应用程序服务时，该站点会针对该文件引发 404 错误。

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

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

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

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 });
};

有关更多详细信息，您可以下载我的示例代码。

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

优先的

方法一

您可以PUBLIC_URL在Application settings门户网站上进行设置。

测试步骤：

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

方法二

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

其它你可能感兴趣的问题

上一篇Reactjs - TypeError：无法读取 null 的属性“值” 下一篇React 网站子文件夹中的“404 Not Found”