我正在尝试使用axios从我的API获取数据，但是却收到一条错误消息401 UNAUTHORIZED

Question

我一直在尝试从我的API中获取一些数据，但是它向我显示了控制台中的错误，提示“ 401 UNAUTHORIZED”。

我做了一个生命周期方法，即componentDidMount（），在其中定义了Axios。

import React, { Component } from 'react'
import BookingSummaryBlock from '../components/BookingSummaryBlock'
import '../assets/css/MyBookings.css';
import Helmet from 'react-helmet';
import { CardDeck } from 'react-bootstrap';
import axios from 'axios';

export class MyBookings extends Component {

    constructor(props){
        super(props);
        this.state = {
            bookings: []
        }
      }

    componentDidMount() {
        axios.get(`https://coox-api.herokuapp.com/v1/booking`)
        .then((response) => {
          console.log("SEE HEERE!!",response);
        })
        .catch(err => {
          console.log(err);
        });
    }
    render() {
        return (
            <div>

                <Helmet>
                    <meta charSet="utf-8" />
                    <title>My Bookings</title>
                </Helmet>

                <center style={{margin: "20px", alignItems: "center"}}>
                    <h1 style={{color: "#5e5e5e", fontSize: "32px", fontFamily: "Trebuchet"}}>My Bookings</h1>
                    <div className="container">
                        <input
                            type="radio"
                            name="BookingToggle"
                            id="ongoing"
                            // value={}
                            // onChange={}
                        />
                        <label htmlFor="ongoing" className="">
                        <span>CURRENT</span>
                        </label>
                    </div>

                    <div className="container">
                        <input
                            type="radio"
                            name="BookingToggle"
                            id="history"
                            // value={}
                            // onChange={}
                        />
                        <label htmlFor="history" className="">
                        <span>PAST</span>
                        </label>
                    </div>
                    <center style={{margin: "20px", alignItems: "center"}}>
                        <CardDeck>
                        <BookingSummaryBlock />
                        <BookingSummaryBlock />
                        <BookingSummaryBlock />
                        <BookingSummaryBlock />
                        <BookingSummaryBlock />
                        <BookingSummaryBlock />
                        </CardDeck>
                    </center>
                </center>
                {/* <div style={{display: "flex", flexDirection: "row", alignItems: "inline", alignContent: "center", justifyContent: "space-between" }}>
                    <BookingSummaryBlock />
                    <BookingSummaryBlock />
                    <BookingSummaryBlock />
                </div> */}
            </div>
        )
    }
}

export default MyBookings

控制台中预期的结果应向我显示API正在发送的数据