在React组件中从Behance API加载数据

时间:2017-05-02 19:19:19

标签: api reactjs cors fetch behance-api

我正在尝试通过他们的API加载Behance项目数据。无论是localhost还是prod,我都会收到以下错误 -

Fetch 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;
});

}

UPDATE:使用jQuery ajax工作,而不是fetch。 -

$.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);
});

1 个答案:

答案 0 :(得分:-1)

这似乎与React相比,Behance更少。你得到的是CORS error,你可能已经想到了。简短的解释是CORS是安装在浏览器上的安全措施,因此网站不能从浏览器请求其他网站看起来是第二个网站。这是一种安全措施,可以防止一些网络钓鱼攻击。

服务器可以禁用CORS(在本例中为Behance),但出于正当理由,他们决定不这样做。

Behance可能允许您从服务器发出您尝试发出的请求。一旦你这样做,你需要从服务器获取信息到你的React应用程序,你会很高兴!