反应 API 获取失败

Posted 2023-02-22

【中文标题】反应 API 获取失败

【英文标题】：React API Fetch fail

【发布时间】：2019-03-22 18:42:00

【问题描述】：

我正在尝试创建一个站点，我将在其中使用 web-api 并在站点上显示“用户”。我有一个 API 密钥，我必须将其作为“x-api-key”放入标题中。

这是我现在的代码：

import React,  Component  from 'react';
import './App.css';

class App extends Component 

constructor(props) 
  super(props);
  this.state = 
    isLoaded: false,
    items: []
  


componentDidMount() 


  const myHeaders = new Headers();

  myHeaders.append('x-api-key', 'KEY_HERE');
  myHeaders.append('Content-Type', 'application/x-www-form-urlencoded');
  myHeaders.append('cache-control', 'no-cache')

  fetch('URL_HERE', 
    method: 'GET',
    headers: myHeaders,
    async: true,
  )
  .then(res => res.json())
  .then(json => 
    this.setState(
      isLoaded: true,
      items: json,
    )
  );


  render() 
  varisLoaded, items = this.state;
  if(!isLoaded) 
    return <div>Loading...</div>;
  

  else
   return (
     <div className="App">
       <ul>
         items.map(item => (
           <li key=item.id>
             Name: item.name | Id:item.id
           </li>
         ));
       </ul>
     </div>
   );
  

导出默认应用；

问题是我在控制台中收到这些错误消息：

无法加载http://URL/users：预检响应没有 HTTP 正常状态。

Uncaught (in promise) TypeError: Failed to fetch

当我尝试在 Postman 中进行 GET 调用时，我成功了。所以我想问题是 api-key 没有在标题中正确实现。

感谢您的帮助，如果您还有什么需要知道的，请告诉我！

【问题讨论】：

这是一个 CORS 问题 - 确保服务器允许跨源请求

我无权访问服务器。我下载了 chrome 的“Allow-Control-Allow-Origin”扩展，但没有运气。谢谢你的回答

进入您的 chrome 控制台，然后前往网络选项卡。执行请求，然后单击正在生成的实际请求。确保在请求标头中看到 X-api-key，并确保正确调用请求。

"Allow-Control-Allow-Origin" extension 显然是一个糟糕的扩展或一个不理解预检的扩展 - 使用 your 服务器将请求代理到不是你的服务器 - 这是最简单的主机不允许 CORS 时最安全的解决方案

感谢 Frankerz，我在 chrome>network 选项卡的请求标头中看到了这一点：Access-Control-Request-Headers: cache-control,x-api-key Access-Control-Request-Method: GET .所以，我想它看起来好吗？ Jaromanda，我会查一下，谢谢。

【参考方案1】：

您需要从代码中删除以下行，然后，您需要从服务器端处理 OPTIONS 方法。

myHeaders.append('cache-control', 'no-cache')

您收到此错误是因为您正在添加带有“x-api-key”的标头。您使请求变得复杂。这要求浏览器发出预检 OPTIONS 请求以请求发送复杂请求的权限。

您正在向其发出请求的服务器响应说该 URL 不允许 OPTIONS 请求

您需要修改服务器并正确处理 OPTION 方法，以便它正确响应预检 CORS 请求。

您没有在邮递员中收到此错误，因为邮递员不需要发出预检请求。

【讨论】：

谢谢，非常有用。解决了服务器端的问题。 （如何将其标记为已回答？）

如果这对您有帮助，请点赞并从左侧的箭头标记为您的正确解决方案。谢谢

【参考方案2】：

如果要使用 api 获取数据，请尝试使用 axios。 它也可以在客户端和服务器端使用，也非常容易。 这是您的指南的 GitHub 存储库。 https://github.com/axios/axios