如何使用axios设置请求头

Question

我是一名有用的助手，可以为您翻译文本。

我正在尝试从一个我找到的足球API中获取信息。 在Postman上它运行良好，但我无法使用axios正确设置头文件。

这是我的代码：

class App extends React.Component {
  constructor(props) {
    super(props);
  }

  getTest = (e) => {
    e.preventDefault();
    let headers = {
      'Content-Type': 'application/json',
      'Access-Control-Allow-Origin': '*',
      'X-Auth-Token': '97e0d315477f435489cf04904c9d0e6co',
    };

    axios.get("https://api.football-data.org/v2/teams/90/matches?status=SCHEDULED", {headers})
      .then(res => {
        console.log("DATA")
      })
      .catch(res => {
        console.log("ERR", res);
      });
  }

    render() {
    return (
      <div>
        <button onClick={this.getTest}>info</button>
      </div>
    );
  }
}

什么问题？ 谢谢

- Jim

Answer 1

您可以按照以下方式在axios中设置标头:

const headers = {
  'Content-Type': 'application/json',
  'X-Auth-Token': '97e0d315477f435489cf04904c9d0e6co',
};
axios.get(url, {headers})

- Umair Farooq

---

你好，我尝试了但是不起作用。我收到了这个错误信息："来自 'http://localhost:3000' 的源已被 CORS 策略阻止：在预检响应中，请求头字段 Access-Control-Allow-Origin 不被 Access-Control-Allow-Headers 允许。" 看起来它似乎有所进展，但我该怎么处理这个问题呢？ - Jim

请检查 https://github.com/axios/axios#axiosgeturl-config。另外确认服务器是否通过'X-Auth-Token'或'authorization'接收到token。 - Umair Farooq

没有问题，它可以正常工作，只是当我在头部设置为“*”时，出现了访问控制错误。 - Jim