axios获取header中的信息_vue axios请求怎么获取 Response中的自定义headers

在 Vue 中使用 Axios 发送请求后，可以通过 `response.headers` 属性来获取响应头信息，包括自定义的头部信息。以下是一个示例：

import axios from 'axios';

axios.get('/api/users')
  .then(response => {
    // 获取自定义头部信息
    const customHeader = response.headers['X-My-Custom-Header'];
    console.log(customHeader);
  })
  .catch(error => {
    console.error(error);
  });

上面的代码中，我们发送了一个 GET 请求，并在 `then` 回调函数中获取响应头的自定义头部信息。其中，`X-My-Custom-Header` 是我们自定义的一个头部信息的名称，你可以根据实际情况替换成你自己的头部信息名称。

相关问题

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信息。