提取API與localhost/127.0.0.1不兼容

就像背景一樣，我有一個反應應用程序坐在遠程EC2 Ubuntu實例上。同一臺服務器還運行Go應用程序，監聽端口8080（端口已從安全設置開放給所有人）。提取API與localhost/127.0.0.1不兼容

我試圖與獲取API的請求，從作出反應的應用程序，如下所示：

var bearer = 'Bearer ...' 
return fetch('http://localhost:8080/home', { 
    headers: new Headers({ 
    'Authorization': bearer 
    }) 
})

在控制檯中，來自Chrome和Firefox，我得到：

類型錯誤：嘗試獲取資源時出現網絡錯誤

當我用127.0.0.1替換localhost時也是如此。

但是，使用EC2實例的外部IP可以工作（並觸發CORS請求 - 由於「授權」標頭 - 服務器可以順利處理）。

在後一種情況下，我還可以看到服務器記錄傳入請求的OPTIONS和GET（在前一種情況下，兩種方法都不存在日誌）。

我也嘗試從EC2機CURL'ing到localhost和請求有效地通過這導致我認爲與Fetch API請求根本沒有觸發。

任何意見，將不勝感激。如果我做錯了任何事情，請指出正確的方向。

來源

2017-05-27 Andy

您在瀏覽器中使用哪個網址來打開頁面（即實際的提取請求）？ – Dekel

我正在使用EC2實例（端口80）的外部IP地址，即成功獲取請求所針對的IP地址。 – Andy

當您編寫localhost時，由於js代碼正在瀏覽器中運行，因此它會調用您的（本地主機）機器（瀏覽器存在於其上）。

您應該爲您的API端點創建一個域/子域，並使用它來代替本地主機或繼續使用硬編碼的IP地址。

您還應該只允許您的前端網站域在允許的來源爲您的後端。防爆。您的網站可以是www.example.com，後端網址可以是www.api.example.com。您應該只允許www.example.com作爲origin，它可以通過www.api.example.com服務。你需要在後端配置它。

來源

2017-05-27 21:21:17 Rubbal

謝謝，這很有道理。雖然這可能更適合我想問的另一個問題，但是如果可能的話，如何保持本地開發機器（使用localhost）和遠程生產機器（不能使用localhost）之間的相同配置？ – Andy

我使用兩種環境。基本上保留一個'webkpack.config.js'和'webpack.config.prod.js'。並使用webpack中的DefinePlugin來定義您的後端子域。在'prod' config中，使用subdomain並在dev config中使用localhost。另外，我允許我的後端在開發模式下的所有來源。 – Rubbal

太棒了！這正是我所希望的。 – Andy

提取API與localhost/127.0.0.1不兼容

回答

相關問題