Question

我正在尝试创建一个网站，在该网站中我将使用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() {
  var{isLoaded, 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正常状态。

未捕获（承诺）TypeError：无法获取

当我尝试在Postman中进行GET呼叫时，我成功了。所以我想问题是api-key不能在标头中正确实现。

感谢帮助，如果您还需要了解其他信息，请告诉我！

Answer 1

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

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

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

您向其发送请求的服务器正在响应，表示不允许对该URL进行OPTIONS请求

您将需要修改服务器并正确处理OPTION方法，以使其对预检CORS请求做出适当的响应。

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

Answer 2

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

React API提取失败

2 个答案: