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文件是從本地主機取代而不是項目目錄

回答

相關問題