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

我有我的项目的以下目录结构。ReactJS：JSON文件是从本地主机取代而不是项目目录

我在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调用无法从我的项目文件夹（我使用相对寻址）加载数据，而是包括本地主机的路径。我想用ajax调用加载数据是否可能。

来源

2017-08-14 geeksal

显示你作为'开始'运行。你可以在package.json文件中找到它。 – Nosyara

您的网络服务器（我猜快递）将提供'公共'文件夹中的文件。

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

如果你真的想，你既可以：

复制/移动文件到公用文件夹
在公共文件夹中创建一个符号链接到文件

来源

2017-08-14 15:11:26 Alcinator

@Nosyara在下面提到了这一点（但不像上面那样清楚）。 – Purgatory

谢谢@Alcinator你让我明白了。 – geeksal

您可以包括它里面源作为

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

因此，这将在编译时嵌入。

另一种方式来做到这一点 - 移动website.json公用文件夹，比你可以访问它作为ajax('/website.json'...

来源

2017-08-14 14:49:09 Nosyara

是不是可以通过使用是我的问题的Ajax？ – geeksal

是的，如果你在后端添加API。而不是使用相对URL来获取ajax文件。 – Nosyara

你能解释一下吗？ – geeksal

我假设你正在使用ES6/ES2015，因为你正在使用react。因此，与其在componentDidMount做它，你可以在上面只补充一点：

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

然后你可以只使用websiteData作为你的组件的变量。

来源

2017-08-14 15:00:25 Purgatory

是的，这是可能的这种方法，但我的问题是如何使用ajax调用它。我正在更新这个问题以使其更清楚。 – geeksal

为什么你需要通过ajax来做到这一点？ json文件是否改变？如果没有，那么这样做是完全合适的。如果它改变了，那么'componentDidMount'只会加载一次。 – Purgatory

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

回答

相关问题