vue axios 请求头加cookie
时间: 2023-05-10 17:01:11 浏览: 150
vue项目使用axios发送请求让ajax请求头部携带cookie的方法
5星 · 资源好评率100%
在Vue中使用Axios进行请求时,需要设置请求头以及Cookie。为了设置请求头中的Cookie,可以在Axios实例中使用withCredentials选项。该选项将会跨域传递Cookie信息。
首先需要创建一个Axios实例:
```
import axios from 'axios'
const instance = axios.create({
baseURL: 'https://api.example.com',
withCredentials: true, // 允许带上跨域请求的cookie
headers: {
'Content-Type': 'application/json;charset=utf-8'
}
})
export default instance
```
然后,在需要发送请求的地方,在请求选项中设置Cookie,可以通过全局设置的实例来完成:
```
import axios from '@/axios'
axios.get('/user', {
headers: {
'Cookie': 'my_cookie=my_value'
}
}).then(response => {
console.log(response.data)
})
```
或者可以使用Interceptors对象拦截器来自动将cookie附加到请求头中:
```
axios.interceptors.request.use(
config => {
// 在发送请求之前做些什么
// 每次请求带上 cookie
const cookie = document.cookie
config.headers.Cookie = cookie
return config
},
error => {
// 对请求错误做些什么
return Promise.reject(error)
}
)
```
这样就可以通过设置请求头中的Cookie来实现在Vue中使用Axios进行请求的功能。
阅读全文