在我的react应用程序中，我使用axios来执行 REST api 请求。
但它无法随请求发送Authorization标头。
这是我的代码：
tokenPayload() {
let config = {
headers: {
'Authorization': 'Bearer ' + validToken()
}
}
Axios.post(
'http://localhost:8000/api/v1/get_token_payloads',
config
)
.then( ( response ) => {
console.log( response )
} )
.catch()
}
在这里，该validToken()方法将简单地从浏览器存储中返回令牌。
所有请求都有 500 错误响应说
无法从请求中解析令牌
从后端。
如何随每个请求发送授权标头？你会推荐任何其他带有react的module吗？
const config = {
headers: { Authorization: `Bearer ${token}` }
};
const bodyParameters = {
key: "value"
};
Axios.post(
'http://localhost:8000/api/v1/get_token_payloads',
bodyParameters,
config
).then(console.log).catch(console.log);
第一个参数是 URL。
第二个是将随您的请求发送的 JSON 正文。
第三个参数是标题（除其他外）。这也是 JSON。
这是在 axios 中设置授权令牌的独特方法。为每个 axios 调用设置配置不是一个好主意，您可以通过以下方式更改默认授权令牌：
import axios from 'axios';
axios.defaults.baseURL = 'http://localhost:1010/'
axios.defaults.headers.common = {'Authorization': `bearer ${token}`}
export default axios;
编辑，感谢 Jason Norwood-Young。
有些API需要将bearer写成Bearer，所以你可以这样做：
axios.defaults.headers.common = {'Authorization': `Bearer ${token}`}
现在您不需要为每个 API 调用设置配置。现在授权令牌被设置为每个 axios 调用。
您可以创建一次配置并在任何地方使用它。
const instance = axios.create({
baseURL: 'https://some-domain.com/api/',
timeout: 1000,
headers: {'Authorization': 'Bearer '+token}
});
instance.get('/path')
.then(response => {
return response.data;
})
的第二个参数axios.post是data(not config)。config是第三个参数。详情请参阅：https : //github.com/mzabriskie/axios#axiosposturl-data-config
通过使用 Axios 拦截器：
const service = axios.create({
timeout: 20000 // request timeout
});
// request interceptor
service.interceptors.request.use(
config => {
// Do something before request is sent
config.headers["Authorization"] = "bearer " + getToken();
return config;
},
error => {
Promise.reject(error);
}
);