獨立反應應用程序中的Web API調用生成CORS錯誤

Question

我有一個項目，它只是一個使用React構建的前端，我試圖在單擊LI時調用外部API。這是我的一個組件的代碼。我從這段代碼中拿出了實際的url，因爲它很長，但是使用Postman時這個調用起作用。

getPlayerStats(name) { 
    fetch(url) 
     .then(function(response) { 
      return response.resultSets.rowSet 
     }) 
} 

這會在我的瀏覽器控制檯中產生此錯誤：請求的資源上沒有「Access-Control-Allow-Origin」標頭。因此不允許原產地'null'訪問。

在這個問題上的任何幫助？我讀過的大部分信息都對後端的事情提出了建議，但我的項目沒有後端。謝謝！

Answer 1

你的問題是，你正在使用file://加載您的應用程序，瀏覽器不會file://

使用CORS政策必須使用本地服務器像Apache或Nginx提供給您的前端應用程序，並與localhost再次加載在這種情況下，對API的請求將具有值爲Origin的標題，並且服務器將接受它。

如果你正在開發前端應用程序，這是不是一個好方法加載file://，總是使用本地Web服務器。