VUE Axios 如何配置反向代理做到前后端分离

[honeymoose]

使用 VUE 框架的主要目的就是为了做到前后端分离。

前后端分离又有一个麻烦的问题就是 CORS 跨域的问题。

下面的配置将会对如何在 VUE 项目中进行配置进行一些简单说明。

main.js 中导入项目

VUE 使用 axios 进行调用。

因此在 VUE 项目中，我们需要导入 axios 包。

这里有 2 个。

import axios from 'axios';
import VueAxios from 'vue-axios';

axios是基于promise的HTTP库，可以使用在浏览器和node.js中，它不是vue的第三方插件

axios使用的时候不能像vue的插件（如：Vue-Router、VueX等）通过Vue.use()安装插件，需要在原型上进行绑定：Vue.prototype.$axios = axios;

vue-axios是axios集成到Vue.js的小包装器，可以像插件一样安装:Vue.use(vueAxios);

简单来说，axios 是基础，vue-axios 对 axios 进行了封装，以便于更加容易的使用。

在项目中使用

需要在创建 App 的时候进行初始化。

在这个初始化的时候，我们可以使用 use 和 provide 以便于全局调用。

  .use(VueAxios, axios)
  .provide('axios',axios)

使用上面的代码进行全局调用。

vue.config.js 设置反向代理

我们还需要在 vue.config.js 中设置反向代理。

这个方向代理的目的就是为了解决 VUE 项目中 CORS 跨域的问题。

    proxy: {
      '/api':{
        target: 'https://api.usvisatrack.com/',
        changeOrigin: true,
        secure: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }

在程序中调用

在程序中，使用下面的方法就可以实现调用了。

  mounted() {
    this.axios
      .get('/api/visa/date?start=2022-04-01&end=2022-10-01')
      .then(response => (this.transactions = response.data));
  }

因为我们设置了全局，所以可以使用 this 来直接调用。

然后将返回的结果设到变量中即可。

如上图，我们将调用结果返回到页面中使用的变量里。