Vue3中如何处理跨域请求？

在前端开发中，跨域请求是一个常见的问题，而在 Vue3 中，处理跨域请求也成为面试中经常被问到的一个话题。Vue3 提供了简单且有效的方式来处理跨域请求，通常我们会使用 axios 库来完成这一任务。axios 是一个基于 Promise 的 HTTP 客户端，可以在浏览器和 Node.js 环境中使用。以下是处理跨域请求的详细步骤。

1. 安装 `axios`

首先，我们需要在 Vue3 项目中安装 axios 库。你可以通过 npm 或 yarn 安装：

npm install axios

2. 在 Vue 项目中引入 `axios`

安装完成后，我们需要在 Vue 项目的入口文件（通常是 main.js）中引入 axios 并进行全局配置。这样，我们可以在任何组件中通过 this.$axios 访问 axios 实例。

示例代码

import { createApp } from 'vue'
import App from './App.vue'
import axios from 'axios'

const app = createApp(App)

// 全局配置 axios
app.config.globalProperties.$axios = axios

app.mount('#app')

在这个示例中，我们将 axios 添加为 Vue 应用的全局属性，这样在任何组件中都可以通过 this.$axios 进行 HTTP 请求。

3. 使用 `axios` 发送跨域请求

在 Vue 组件中，可以使用 axios 发送跨域请求。以下是一个简单的例子，演示如何在组件的 mounted 生命周期钩子中发送 GET 请求。

示例代码

export default {
  mounted() {
    this.$axios.get('https://api.example.com/data')
      .then(response => {
        console.log(response.data)
      })
      .catch(error => {
        console.error(error)
      })
  }
}

在这个示例中，我们使用 this.$axios.get 方法发送了一个 GET 请求。请求成功时，返回的数据会打印在控制台中，如果请求失败，则会捕获并打印错误。

需要注意的是，当发送跨域请求时，服务器端需要正确配置 CORS（跨域资源共享），通常通过设置响应头 Access-Control-Allow-Origin 来允许跨域访问。

4. 发送 POST 请求

除了 GET 请求，我们还可以使用 axios 发送 POST 请求。以下是一个发送 POST 请求的示例：

示例代码

export default {
  methods: {
    postData() {
      this.$axios.post('https://api.example.com/data', {
        name: 'example',
        age: 25
      })
      .then(response => {
        console.log(response.data)
      })
      .catch(error => {
        console.error(error)
      })
    }
  }
}

在这个示例中，我们使用 this.$axios.post 发送了一个带有 JSON 数据的 POST 请求。请求成功后，同样会在控制台中打印返回的数据，失败时会打印错误信息。

5. 处理跨域问题

当我们发送跨域请求时，服务端需要正确配置以允许跨域访问。通常，通过在服务器的响应头中添加 Access-Control-Allow-Origin 来允许特定或所有域名的跨域请求。此外，还可以设置其他 CORS 相关的头，如 Access-Control-Allow-Methods、Access-Control-Allow-Headers 等。