使用HTTP授權標頭的API請求在componentDidMount內

我對React非常陌生，並且正在嘗試構建一個從Yelp API獲取信息的應用程序，但我無法獲得響應。 Yelp Fusion v3需要一個'access_token'（我已經成功地在Postman中作爲響應接收）。所以要在我的應用程序中提出這個請求，我正在使用Axios。當我在componentDidMount（）中提出此請求時，作爲響應，我得到使用HTTP授權標頭的API請求在componentDidMount內

XMLHttpRequest無法加載https://api.yelp.com/v3/businesses/search?term=sushi&location=Boston。對預檢請求的響應不會通過訪問控制檢查：請求的資源上不存在「Access-Control-Allow-Origin」標頭。因此'Origin'http://localhost:8080'不允許訪問。響應有HTTP狀態代碼500。

雖然它可能似乎，我錯誤地指定和的access_token參數，運行在一個單獨的文件相同的代碼時（而不是應用程序的一部分），我得到的JSON響應我正在尋找我的應用程序。

這裏是我的componentDidMount（）：

componentDidMount: function() { 
    axios.get('https://api.yelp.com/v3/businesses/search?term=Sushi&location=Boston',{ 
     headers: { 
      Authorization: `Bearer ${token}` 
     } 
    }) 
    .then(function(res){ 
     console.log(res) 
    }) 
    .catch(function(err){ 
     console.log(err) 
    }) 
},

我已經試過了Yelp的節點模塊爲好，但我有沒有運氣。請幫忙！

來源

2017-03-10 Serey

此錯誤是一個跨源錯誤。

網頁瀏覽器有一個AJAX請求的捕獲：他們需要尋址到相同的來源或由第三方自己授權，否則他們被阻止。既然你無法控制Yelp，我建議你採取一種解決方法。

可用的解決辦法

你使用類似JSONP。這種方法基本上是在<script>標籤中提出請求。服務器將把響應包裝在一個Javascript腳本中，並將其加載到頁面中。（https://en.wikipedia.org/wiki/JSONP）。服務器必須提供這種格式來解決這個問題。
您使用反向代理。您可以將NodeJS設置爲一個。在此設置中，您將向您的來源請求yybp請求，該來源將其重定向到yelp服務器。這是有效的，因爲你的Node代理沒有與你的瀏覽器相同的限制。（例如：https://github.com/nodejitsu/node-http-proxy）

可能有其他方法來解決這個問題，但這些都是流行的方法。

希望這會有所幫助。

來源

2017-03-10 01:41:55 gretro

這很有道理，我得到了很多'CORS'的錯誤，並沒有真正理解它是什麼。您認爲使用Express設置API會是最好的方式嗎（在app.get（）中發出請求並返回JSON）？ – Serey

你可以這樣做，這樣你可以保護你的yelp API密鑰。切勿將任何敏感信息存儲在Javascript代碼中。您可以創建一個後端，該後端將擁有yelp API的密鑰，併爲您的應用程序提供所需的數據。這似乎是一個敏感的計劃。 ^^ – gretro

內置了一個API，現在完美工作，謝謝!!! – Serey

使用HTTP授權標頭的API請求在componentDidMount內

回答

相關問題