vue中axio跨域

在Vue中使用axios进行跨域请求有两种配置方式。全局配置和局部配置。

全局配置的方法是在main.js中引入axios，并将其挂载到Vue的原型上，这样在任意组件中都可以使用this.$axios来发起请求。具体代码如下：

// 1. 安装axios
npm i axios

// 2. 在 main.js 中配置引入 axios
import axios from 'axios'
Vue.prototype.$axios = axios

// 3. 在任意组件中使用 axios 发起请求
created() {
  this.$axios.get('http://localhost:8080/api') // 此处路径为本项目路径
    .then((res) => {
      console.log(res.data);
    })
    .catch((err) => {
      console.log(err);
    })
}

局部配置的方法是在你所使用的组件中引入axios，并直接使用axios来发起请求。具体代码如下：

// 1. 安装axios
npm i axios

// 2. 在你所使用的组件中引入 axios
import axios from 'axios'

// 3. 在任意组件中使用 axios 发起请求
created() {
  axios.get('http://localhost:8080/api') // 同上
    .then((res) => {
      console.log(res.data);
    })
    .catch((err) => {
      console.log(err);
    })
}

需要注意的是，在进行跨域请求时，还需要在配置文件中添加代理表来解决跨域问题。具体配置方法可以参考[1]中的代码示例。