[英]Axios not passing headers on requests
I'm building a VueJS application and I'm using JSON web tokens as my auth system.我正在构建一个 VueJS 应用程序,我使用 JSON Web 令牌作为我的身份验证系统。 When I log the user, I store the token with localStorage and works fine.
当我登录用户时,我使用 localStorage 存储令牌并且工作正常。 I check the headers and it's in the 'Authorization' param.
我检查了标题,它在“授权”参数中。
I pass with axios.defaults.headers.common['Authorization'] = localStorage.getItem('token')
我通过
axios.defaults.headers.common['Authorization'] = localStorage.getItem('token')
I see the headers and it's okay.我看到标题,没关系。 But when I execute a get request to an protected route in my API, return 'unauthorized'.
但是,当我对 API 中的受保护路由执行 get 请求时,返回“未经授权”。 But when I pass the header with token manually in the request, works fine.
但是当我在请求中手动传递带有令牌的标头时,工作正常。
Somebody know how to pass the header automatically when executing some request?有人知道如何在执行某些请求时自动传递标头吗?
You can use axios.create
to create a new axios instance with a config object , including the headers.您可以使用
axios.create
使用配置对象(包括标题)创建新的 axios 实例。 The configuration will be used for each subsequent calls you make using that instance.该配置将用于您使用该实例进行的每个后续调用。
Something like this worked for me:这样的事情对我有用:
var App = Vue.component('app', {
mounted () {
this.response = null
this.axiosInstance = axios.create({
baseURL: 'http://localhost:5000/',
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json',
}
})
},
data () {
return {
response: this.response,
}
},
methods: {
login () {
this.axiosInstance.post('login', {username: 'test', password: 'test'})
.then(resp => {
this.accessToken = resp.data.access_token
this.axiosInstance.defaults.headers['Authorization'] = 'Bearer ' + this.accessToken
})
.catch(err => this.response = err.response.status + ' ' + err.response.statusText)
},
protected () {
this.axiosInstance.get('protected')
.then(resp => this.response = resp.data)
.catch(err => this.response = err.response.status + ' ' + err.response.statusText)
}
},
template: '<div><button @click="login">Connect</button><button @click="protected">Protected</button></div>'
})
try this..尝试这个..
//in get request
const auth = {
headers: {Authorization:'JWT ' + localStorage.getItem('token')}
}
axios.get('http://yourapi.com',auth).then(result => {
console.log(result.data)
})
//in post request
const auth = {
headers: {Authorization:'JWT ' + localStorage.getItem('token')}
}
//note:auth will be 3rd parameter in post request
axios.post('http://yourapi.com',{somekey:'some value'},auth).then(result => {
console.log(result.data)
})
interceptor which includes your auth token in every request as an Authorization header:拦截器在每个请求中包含您的身份验证令牌作为授权标头:
axios.interceptors.request.use(
function(config) {
const token = localStorage.getItem('token')
if (token) config.headers.Authorization = `Bearer ${token}`
return config
},
function(error) {
return Promise.reject(error)
}
)
you could place it in the main file, for example main.js你可以把它放在主文件中,例如 main.js
axios.defaults.headers.common['Authorization'] = 'Bearer ' + localStorage.getItem('token')
if No. 2 works, then you may want to execute apis even if web is refreshed, then follow:如果第 2 条有效,那么即使刷新了 web,您也可能希望执行 apis,然后执行以下操作:
axios.interceptors.request.use(function (config) {
const token = 'Bearer ' + localStorage.getItem('token');
config.headers.Authorization = `Bearer ${token}`;
return config;
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.