如何在標頭中傳遞授權令牌以響應 Axios.post？

Question

我的 React、Express、MongoDB 應用程序。

我想為 Axios 發布請求傳遞帶有標頭的身份驗證令牌。

但是，當我嘗試通過它時，出現 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 發布請求

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
            }
        ]
    ]
}

Answer 1

Axios.post接收url 、 data和headers作為參數。 如果只傳遞url和headers ，則必須傳遞null作為data

axios.post(url, null, headers)

或者你可以試試Axios api

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

Answer 2

你的代碼有一點錯誤我已經修改了你的代碼。 請用以下代碼替換您的 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
               })
              });