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}`,
    },
  })
}