json - ReactJS:JSON 文件是从本地主机而不是项目目录获取的

Question

我的项目有以下目录结构。

我的 index.js 文件中有以下代码用于加载 website.json 文件。

index.js

componentDidMount() {
    $.ajax({
       url: "../website.json",
       type: "GET",
       dataType: 'json',
       ContentType: 'application/json',
       success: function(data) {         
         this.setState({data: data});
         console.log(data);
       }.bind(this),
       error: function(jqXHR) {
         console.log(jqXHR);
       }.bind(this)
    })
  }

问题是我正在使用 npm start 命令从应用程序的本地目录服务器我的 React 应用程序。这为我的应用程序提供了 http://localhost:3000/ 。现在的问题是应用程序尝试从 http://localhost:3000/website.json 加载 website.json 文件，这会给出 404 not found 错误。

所以，我的问题是如何从我的项目目录而不是本地主机加载我的 website.json 文件。

注意:我的项目文件夹不在本地主机，而是在虚拟主机。

更新: 我特别询问为什么 ajax 调用无法从我的项目文件夹加载数据(我正在使用相对寻址)，而是包含来自本地主机的路径。我想使用ajax调用加载数据是否可能。

Answer 1

您的网络服务器(我猜是 Express)将提供“公共(public)”文件夹中的文件。

出于安全原因，网络服务器不允许访问根目录(在您的情况下为/public)之外的文件，因此您将无法通过ajax(或从浏览器)获取文件。

如果您确实愿意，您可以:

• 将文件复制/移动到公用文件夹
• 创建指向公用文件夹中文件的符号链接(symbolic link)