ReactJS：从本地主机而不是项目目录获取 JSON 文件答案

【问题标题】：ReactJS: JSON file is fetched from localhost instead of project directoryReactJS：从本地主机而不是项目目录获取 JSON 文件
【发布时间】：2018-01-22 10:45:44
【问题描述】：

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

我的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 命令从我的应用程序的本地目录服务器我的反应应用程序。这在 http://localhost:3000/ 为我的应用程序提供服务。现在的问题是应用程序尝试从http://localhost:3000/website.json 加载website.json 文件，这会产生404 not found 错误。

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

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

更新：我特别问为什么 ajax 调用无法从我的项目文件夹中加载数据（我使用的是相对寻址），而是包括来自 localhost 的路径。我想使用ajax调用加载数据是否可能。

【问题讨论】：

显示您正在运行的内容作为“开始”。你可以在 package.json 文件中找到它。

标签： json node.js ajax reactjs npm

【解决方案1】：

您的网络服务器（我猜是 Express）将从“公共”文件夹提供文件。

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

如果你真的想，你可以：

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

【讨论】：

@Nosyara 在下面提到了这一点（但是没有上面那么清楚）。
感谢@Alcinator 你让我明白了。

【解决方案2】：

您可以将其包含在源代码中

var website = require('../website.json');

所以它会在编译时嵌入。

另一种方法 - 将 website.json 移动到公用文件夹，而不是您可以以 ajax('/website.json'... 的身份访问它

【讨论】：

我的问题是不能使用 ajax 吗？
是的，如果您在后端添加 API。而不是使用相对 URL 通过 ajax 获取文件。
你能解释一下吗？
你必须管理服务器端。或者将您的文件移动到公共文件夹并从根目录 ajax。
目前我在本地机器上做。我肯定会把它移到服务器上。所以我想在这里模拟本地主机。稍后我将在服务器端提供不同的 url。

【解决方案3】：

我假设您使用的是ES6/ES2015，因为您使用的是react。因此，您无需在componentDidMount 中执行此操作，只需将其添加到顶部即可：

import websiteData from '../website.json';

然后您可以在组件中使用websiteData 作为变量。

【讨论】：

是的，通过这种方法是可能的，但我的问题是如何使用 ajax 调用来做到这一点。我正在更新问题以使其更清楚。
为什么需要通过ajax来做？ json文件有变化吗？如果没有，那么这样做是非常合适的。如果它正在改变，那么componentDidMount 无论如何只会加载一次。