從React組件中的Behance API加載數據

Question

我正在嘗試通過其API加載Behance項目數據。 無論是本地主機還是產品，我都會收到以下錯誤-

提取API無法加載XXX。 對預檢請求的響應未通過訪問控制檢查：請求的資源上不存在“ Access-Control-Allow-Origin”標頭。 因此，不允許訪問源' http：// localhost：5000 '。 如果不透明的響應滿足您的需求，請將請求的模式設置為“ no-cors”，以在禁用CORS的情況下獲取資源。

不知道如何解決這個問題。 我在以下投資組合組件中的代碼-

getPortfolio = () => {

const USER_ID = `XXX`,
      PROJECT_ID = `XXX`,
      API_KEY = `XXX`;

const BEHANCE_URL = `https://api.behance.net/v2/users/${USER_ID}/projects?client_id=${API_KEY}`;
console.log(BEHANCE_URL);

fetch(BEHANCE_URL, {
  method: 'get',
  dataType: 'jsonp',
  headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json'
  }
}).then((response) => {
  return response.json();
}).then((responseData) => {
  return responseData;
}).catch((err) => {
  return err;
});

}

更新：使用jQuery ajax可以代替獲取。 -

$.ajax({
  url: BEHANCE_URL,
  type: "get",
  data: {projects: {}},
  dataType: "jsonp"
}).done((response) => {
  this.setState({
    portfolioData: response['projects']
  });
}).fail((error) => {
  console.log("Ajax request fails")
  console.log(error);
});

Answer 1

這似乎對React沒什么作用，而對Behance卻有更多的作用。 您可能會發現，您得到的是CORS錯誤 。 簡短的解釋是，CORS是一種在瀏覽器中使用的安全措施，因此網站無法從瀏覽器請求其他網站顯示為第二個網站。 這是一種安全措施，可以防止某些網絡釣魚攻擊。

服務器可以禁用CORS（在本例中為Behance），但出於正當理由，他們決定不這樣做。

Behance可能會允許您改為嘗試從服務器發出請求。 完成后，您需要將信息從服務器發送到React應用程序，您將一路順風！