vue axios 设置header 跨域

Vue Axios 设置Header 跨域

1. 背景介绍

在前端开发中，我们经常会遇到需要发送 HTTP 请求获取数据的情况。然而，由于浏览器的同源策略，跨域请求是被禁止的。为了解决这个问题，我们可以通过设置 HTTP 请求的 Header 来实现允许跨域。

2. Vue 中使用 Axios 发送请求

Axios 是一个基于 Promise 的 HTTP 客户端，可以用于浏览器和 Node.js。Vue 通常使用 Axios 来发送网络请求。

在 Vue 项目中，首先要确保已经安装了 Axios，可以使用 npm 或者 yarn 进行安装：

npm install axios

或

yarn add axios

安装完成后，可以在 Vue 组件中引入 Axios：

import axios from 'axios'

接下来，我们可以在组件的方法中使用 Axios 来发送请求。例如，我们要发送一个 GET 请求来获取用户信息：

axios.get('/api/user')
  .then(response => {
    console.log(response.data)
  })
  .catch(error => {
    console.error(error)
  })

3. 设置 Header 跨域

在发送请求时，我们可以通过设置 Axios 的 headers 属性来设置 Header。要实现跨域请求，我们需要设置 Access-Control-Allow-Origin Header。

axios.defaults.headers.common['Access-Control-Allow-Origin'] = '*'

在上述代码中，axios.defaults.headers.common 是 Axios 默认的 Headers，Access-Control-Allow-Origin 是我们要设置的 Header 名称，'*' 表示允许所有域的请求。

4. 完整示例代码

下面是一个完整的示例代码，展示了如何使用 Axios 发送跨域请求并设置 Header：

<template>
  <div>
    <button @click="getUser">获取用户信息</button>
    <div>{{ userInfo }}</div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      userInfo: null
    }
  },
  methods: {
    getUser() {
      axios.defaults.headers.common['Access-Control-Allow-Origin'] = '*'
      axios.get('
        .then(response => {
          this.userInfo = response.data
        })
        .catch(error => {
          console.error(error)
        })
    }
  }
}
</script>

在上述代码中，当点击按钮时，会触发 getUser 方法，该方法会发送一个 GET 请求来获取用户信息，并将返回的数据赋值给 userInfo 变量。

5. 总结

通过设置 Header 跨域，我们可以在 Vue 中使用 Axios 发送跨域请求。首先，我们需要安装并引入 Axios 库，然后使用 axios.defaults.headers.common 对象来设置 Header。在实际开发中，我们可以根据具体的需求来设置 Header 的值，以实现更复杂的跨域请求。

以上是关于 Vue Axios 设置 Header 跨域的介绍和示例代码，希望对你有所帮助！