axios获取header中的信息_vue axios请求怎么获取 Response中的自定义headers
时间: 2024-03-13 20:43:10 浏览: 61
你可以在axios请求的响应中通过`headers`属性获取到返回的自定义头部信息。具体的代码实现如下:
```javascript
axios.get('/your/api/url')
.then(response => {
const customHeaders = response.headers.custom_header_name;
console.log(customHeaders);
})
.catch(error => {
console.log(error);
});
```
其中,`custom_header_name`为你自定义的头部名称。如果你返回了多个自定义头部信息,你可以通过`response.headers`获取到一个对象,对象的属性名为自定义头部的名称,属性值为对应的头部信息。
相关问题
vue中axios设置表单头_vue+axios表单中上传图片步骤详解
在Vue中使用axios上传图片需要设置请求头,这里提供一个简单的步骤:
1. 安装axios和qs库
```
npm install axios qs --save
```
2. 在vue组件中引入axios
```
import axios from 'axios';
```
3. 设置请求头
```
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
```
4. 创建FormData对象,设置上传的图片文件
```
let formData = new FormData();
formData.append('file', file);
```
5. 发送请求
```
axios.post(url, formData)
.then(response => {
console.log(response);
})
.catch(error => {
console.log(error);
});
```
完整代码如下:
```
<template>
<div>
<input type="file" ref="file" @change="uploadImage">
</div>
</template>
<script>
import axios from 'axios';
import qs from 'qs';
export default {
methods: {
uploadImage() {
let file = this.$refs.file.files[0];
let formData = new FormData();
formData.append('file', file);
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
axios.post(url, formData)
.then(response => {
console.log(response);
})
.catch(error => {
console.log(error);
});
}
}
}
</script>
```
vue获取response中的header
可以通过axios的response对象获取header信息,具体方法如下:
1. 在vue组件中引入axios库
```
import axios from 'axios'
```
2. 发送请求并获取response对象
```
axios.get('/api/data').then(response => {
// 在response中获取header信息
const headers = response.headers
console.log(headers)
})
```
3. 在headers对象中获取具体的header信息
```
// 获取Content-Type头信息
const contentType = headers['content-type']
console.log(contentType)
```
注意:如果跨域请求需要在后端设置Access-Control-Expose-Headers头信息,才能在前端获取到自定义的header信息。