[英]Sending request headers / authorization axios.post in react-native
[英]How to pass authorization token in header to react Axios.post?
我的 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
}
]
]
}
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.....
你的代码有一点错误我已经修改了你的代码。 请用以下代码替换您的 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
})
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.