从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应用程序，您将一路顺风！