vue3 axios 跨域接收后台数据-摩杜云开发者社区

Vue3 Axios跨域：接收后台数据

在Vue.js开发中，我们经常需要通过Ajax请求从后台获取数据。而当后台接口跨域时，我们需要使用Axios库来发送跨域请求。本文将介绍如何在Vue3项目中使用Axios发送跨域请求并接收后台数据。

跨域问题简介

跨域是指前端代码运行的域与请求的资源所在的域不一致。出于安全原因，浏览器限制了跨域请求。当我们在前端代码中使用Ajax请求时，如果请求的接口与当前域名不一致，就会出现跨域问题。

解决跨域问题的方法

解决跨域问题有多种方法，常用的方法包括：

JSONP：通过动态创建<script>标签，将请求的数据包装成回调函数的参数返回并执行。但是JSONP只支持GET请求，且需要后台配合返回固定格式的数据。
CORS：后台设置响应头Access-Control-Allow-Origin允许跨域请求。这是一种比较常用的解决跨域问题的方法。
代理：通过配置服务器代理转发请求来解决跨域问题。

本文将使用CORS方法来解决跨域问题。

使用Axios发送跨域请求

Axios是一个基于Promise的HTTP库，可以在浏览器和Node.js中发送HTTP请求。在Vue3项目中，我们可以使用Axios来发送跨域请求。

首先，我们需要安装Axios：

npm install axios

然后，在项目的main.js文件中引入Axios：

import axios from 'axios'

createApp(App).use(router).mount('#app')

app.config.globalProperties.$http = axios

接下来，我们可以在Vue组件中使用this.$http来发送跨域请求了。例如，我们要从后台获取用户信息：

<template>
  <div>
    <h2>用户信息</h2>
    <ul>
      <li v-for="user in users" :key="user.id">{{ user.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      users: []
    }
  },
  mounted() {
    this.fetchUsers()
  },
  methods: {
    fetchUsers() {
      this.$http.get('
        .then(response => {
          this.users = response.data
        })
        .catch(error => {
          console.error(error)
        })
    }
  }
}
</script>

在上述代码中，我们使用this.$http.get方法发送GET请求，并将返回的数据赋值给users数组。

后台配置CORS

为了让后台接口支持跨域请求，我们需要在后台配置CORS。通常，我们可以在后台的响应头中设置Access-Control-Allow-Origin来允许特定域名的请求。

假设我们的后台是用Node.js和Express框架搭建的，我们可以在后台的路由中添加以下代码：

app.use((req, res, next) => {
  res.setHeader('Access-Control-Allow-Origin', 'http://localhost:8080')
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE')
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type')
  next()
})

上述代码中，我们设置Access-Control-Allow-Origin为前端代码所在的域名，这样就允许该域名的请求。

结语

本文介绍了在Vue3项目中使用Axios发送跨域请求并接收后台数据的方法。通过使用Axios库，我们可以轻松地发送跨域请求，并通过后台配置CORS来解决跨域问题。希望本文对你理解Vue3跨域问题有所帮助。

参考资料：

[Axios官方文档](
[MDN - 跨域资源共享（CORS）](