Reactjs 如何在标头中传递授权令牌以响应Axios.post？

我与React、Express、MongoDB的应用程序

我想为Axios post请求传递带有标头的身份验证令牌

但是，当我试图通过它，得到403错误（禁止）

本地存储

这里我从本地存储中检索所有身份验证数据

export function authHeader() {
    // return authorization header with basic auth credentials
    let user = JSON.parse(localStorage.getItem('user'));

    if (user && user.token) {
        return { Authorization: `Bearer ${user.token}` };
    } else {
        return {};
    }
}

Axios.post

我在这里调用axios post请求

import React, { Component } from 'react'
import Axios from 'axios';
import { authHeader } from '../../../helpers'

export default class SubAdmin extends Component {
    constructor(props) {
        super(props)

        this.state = {
            user: {},
            users: [],
            error: null,
            isLoaded: false,
            items: []
        }
    };

    componentDidMount() {
        this.setState({
            user: JSON.parse(localStorage.getItem('user')),
            users: { loading: true }
        });
        Axios.post('http://localhost:4200/api/viewSubAdmin', 
                    {
                        headers: authHeader()
                    }).then(
          result => {
              console.log(result);

            this.setState({
              isLoaded: true,
              items: result.data
            });
          },
          error => {
            this.setState({
              isLoaded: true,
              error
            });
          }
          );
      }

API标题和响应

这是我从浏览器中得到的响应

Request URL: http://localhost:4200/api/viewSubAdmin
Request Method: POST
Status Code: 403 Forbidden
Remote Address: [::1]:4200
Referrer Policy: no-referrer-when-downgrade
Access-Control-Allow-Origin: *
Connection: keep-alive
Content-Length: 9
Content-Type: text/plain; charset=utf-8
Date: Mon, 23 Mar 2020 10:04:33 GMT
ETag: W/"9-PatfYBLj4Um1qTm5zrukoLhNyPU"
X-Powered-By: Express
Accept: application/json, text/plain, */*
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9
Connection: keep-alive
Content-Length: 171
Content-Type: application/json;charset=UTF-8
Host: localhost:4200
Origin: http://localhost:3000
Referer: http://localhost:3000/
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-site
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.149 Safari/537.36
{headers: {,…}}
headers: {,…}
Authorization: "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhZG1pbiI6IjEyMzQ1Njc4OSIsImlhdCI6MTU4NDk1MDM3MH0.Bk4q3qEsVrA8TDn7Bbk5M689B-6uVfg4r9FTmfDTWc4"

我的邮递员电话打得很好

POST: http://localhost:4200/api/viewSubAdmin
Headers: Authorization:"Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhZG1pbiI6IjEyMzQ1Njc4OSIsImlhdCI6MTU4NDk1MDM3MH0.Bk4q3qEsVrA8TDn7Bbk5M689B-6uVfg4r9FTmfDTWc4",
Response Body: {
    "subadmin_details": [
        [
            {
                "isBlocked": false,
                "_id": "5e5749872eb4ab0ff5c037f9",
                "name": "abcd",
                "password": "123456",
                "admintype": "subadmin"
            },
            {
                "isBlocked": false,
                "_id": "5e574b4a2eb4ab0ff5c037fb",
                "name": "abcde",
                "password": "123456",
                "admintype": "subadmin"
            },
            {
                "isBlocked": false,
                "_id": "5e57c2b7fe57bc7a7165cd64",
                "name": "12345678",
                "password": "12345678",
                "admintype": "subadmin",
                "__v": 0
            },
            {
                "isBlocked": false,
                "_id": "5e57c31594c9287afdf186f9",
                "name": "1234567",
                "password": "1234567",
                "admintype": "subadmin",
                "__v": 0
            },
            {
                "isBlocked": false,
                "_id": "5e57c3266dfbde7b1507453a",
                "name": "123456",
                "password": "123456",
                "admintype": "subadmin",
                "__v": 0
            }
        ]
    ]
}

---

Axios.post

按顺序接收

url

、

数据

和

标题

作为参数。如果只传递

url

和

标题

，则必须将

null

作为

数据

axios.post(url, null, headers)

或者您可以尝试

axiosapi

Axios({
    method: 'post',
    url: 'http://localhost:4200/api/viewSubAdmin',
    headers: authHeader()
}).then.....

---

你的代码有一点错误，我已经修改了你的代码。请用以下代码替换您的axios呼叫并检查

Axios.post('http://localhost:4200/api/viewSubAdmin',{
            headers: authHeader()
          }).then(result => {
              console.log(result)
              this.setState({
               isLoaded: true,
               items: result.data
              })
            }).catch(error => {
                this.setState({
                 isLoaded: true,
                 error
               })
              });

---

我不确定这是否有效，但你可以试一下。您可以在axios post-call中执行Header:（）=>authHeader（）。不工作，顺便说一句，感谢您分享您的想法。我看到了邮递员的回复，并与您的本地请求进行了比较。我认为H in Headers在postman中是大写的，但在您的本地版本中它很小。我也尝试过，但没有改变。谢谢@iamhuynq，你救了我一天，你能解释为什么我的代码不起作用吗？不确定，但我认为axios post希望将数据作为参数传递，如果你只传递URL和头，头将被视为数据。因此，我认为您可以将

null

传递给request

axios.post（url，null，headers）

，它可能会修复这个错误，很高兴它有帮助！