在React Component中從Behance API中加載數據

我想通過API加載Behance項目數據。無論其本地主機或產品，我收到以下錯誤 -在React Component中從Behance API中加載數據

提取API無法加載XXX。對預檢請求的響應不會通過訪問控制檢查：請求的資源上不存在「訪問控制 - 允許來源」標頭。因此不允許訪問原產地'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; 
}); 

}

UPDATE：而不是獲取，使用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); 
});

來源

2017-05-02 Yasir

這似乎與React和Behance有關。你可能想到的是CORS error。簡單的解釋是，CORS是瀏覽器中的一項安全措施，因此網站無法從瀏覽器請求其他網站顯示爲第二個網站。這是一項安全措施，可以防止一些網絡釣魚攻擊。

CORS可以被服務器（在這種情況下，Behance）禁用，但他們決定不出於合法原因。

Behance可能會允許您提出您嘗試從服務器創建的請求。一旦你這樣做了，你將需要從你的服務器獲得信息到你的React應用程序，並且你將會很開心！

來源

2017-05-02 19:53:58

奇怪的是，jQuery的引入和做$ .ajax的工作來拉動數據 – Yasir

你的意思是使用jQuery而不是Fetch？這確實很奇怪。 –

啊，這個工程 - $阿賈克斯（{ 網址：BEHANCE_URL，類型：「獲取」，數據：{項目：{}}，數據類型：「JSONP」 }）來完成（（響應。）=> { this.setState（{ portfolioData：響應[ '項目'] }）;} ）失敗（（誤差）=> { 的console.log（「Ajax請求失敗」）的console.log （error）; }）; – Yasir

在React Component中從Behance API中加載數據

回答

相關問題