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

Posted 2023-02-22

【中文标题】在 React 组件中从 Behance API 加载数据

【英文标题】：Loading Data from Behance API in React Component

【发布时间】：2017-09-30 10:25:26

【问题描述】：

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

Fetch API 无法加载 XXX。对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，Origin 'http://localhost:5000' 不允许访问。如果不透明的响应满足您的需求，请将请求的模式设置为“no-cors”以获取禁用 CORS 的资源。

不知道如何解决这个问题。 我在下面 Portfolio 组件中的代码 --

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

【问题讨论】：

你知道为什么使用 jquery 它不会抛出 CORS 错误吗？因为不应该是这样。看看这个，***.com/questions/25923796/cors-error-with-jquery。我很想知道 jquery 是如何代替 fetch 工作的。

我刚刚在一个项目中实现了它，它确实足够有效。我听说使用fetch() 和jQuery，您可以规避CORS 错误，而且显然可以。

【参考方案1】：

这似乎用 React 做的更少，而用 Behance 做的更多。你得到的是CORS error，你可能已经猜到了。简短的解释是，CORS 是一种放在浏览器上的安全措施，因此网站无法从浏览器请求其他网站看起来是第二个网站。这是一种安全措施，可以防止某些网络钓鱼攻击。

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

Behance 可能会允许您改为从服务器发出您尝试发出的请求。一旦你这样做了，你将需要从你的服务器获取信息到你的 React 应用程序，然后你就可以开始了！

【讨论】：

奇怪的是，引入 jQuery 并做一个 $.ajax 可以拉取数据

你的意思是使用 jQuery 而不是 Fetch？这确实很奇怪。

是的，这行得通 -- $.ajax( url: BEHANCE_URL, type: "get", data: projects: , dataType: "jsonp" ).done((response ) => this.setState( portfolioData: response['projects'] ); ).fail((error) => console.log("Ajax 请求失败") console.log(error); ) ;