Axios 错误 401（未经授权）尝试获取 api 时出错

Question

• 错误：请求失败，状态码为 401
• 在 createError (createError.js:16) -at 解决 (settle.js:17)
• 在 XMLHttpRequest.handleLoad (xhr.js:62)

import React, { Component } from 'react'
import axios from 'axios';
class QuestionAPI extends Component {
  constructor(props) {
    super(props);
    this.state = {
      items: [],
      MYTOKEN: "cqondiodwoidndndjjajajejh.ndoqndnodnqodoqdiapoe89wnwjwmalmqql2mkKKMkmwk"
    };
  }
  componentDidMount = (MYTOKEN) => {
    axios.get(`http://192.168.0.10:9000/getquestions`,{
      headers: {
        'Content-Type': 'application/json',
        'Accept': 'application/json',
        "token": 'Bearer' + MYTOKEN
      },
    })
      .then(res => {
        console.log("res" + res)
      })
      .catch(e => console.log(e))
  }
  render() {
    return (
      <div>
      </div>
    );
  };
}
export default QuestionAPI;

Answer 1

您的代码存在一些问题。

• componentDidMount方法没有收到任何 arguments。 因此，您必须从localStorage获取令牌（假设您将令牌存储在其中）。 您应该从组件 state 中删除硬编码令牌。

• 令牌应该在Authorization header 中发送（您的代码在token中发送它，这就是 API 发送401 Unauthorized响应的原因）。 并且Bearer旁边应该有一个空格。

Authorization: `Bearer ${token}`

• 您不应该对 API URL 进行硬编码。 使用环境变量。 如果您使用的是Create React App ，则可以将前缀为REACT_APP_的环境变量添加到.env或者如果您有自定义 Webpack 设置，则可以使用dotenv-webpack 。

componentDidMount = () => {
  const token = localStorage.getItem('token') // Replace token with the right key
  if (!token) {
    // handle no token case
    return
  }

  axios.get(`${process.env.API_BASE_URL}/getquestions`, {
    headers: {
      'Content-Type': 'application/json',
      Accept: 'application/json',
      Authorization: `Bearer ${token}`,
    },
  })
}