通过前端代理解决vue跨域问题

在用flask和vue练手一个电商购物的项目时，遇到了前后端跨域的问题。不知道是本地配置的问题还是之前写的代码逻辑有问题，通过flask_cors无法解决遇到的问题。

CORS(app, supports_credentials=True) # 解决前后端跨域问题

于是通过前端跨域主流解决方案（Access to XMLHttpRequest at ‘http..’ from origin ‘null‘ has been blocked by CORS policy）-CSDN博客这位老哥方案我见识到了可以在前段配置代理的方式绕过cors。于是我在config文件中加入了如下代码：

// vue.config.js
module.exports = {
  // ...其他配置
  devServer: {
    proxy: {
      '/user': { // 代理所有以 /user 开头的请求
        target: 'http://127.0.0.1:5000', // Flask 应用的地址
        changeOrigin: true,
      },
    },
  },
};

可是捣鼓了半天后仍然不行，问题出在：地址的设置上

const api = {
    // 登录功能
    login(params){
        return axios.post(base.baseURL+base.login,params)
    }
}

在这里我的baseURL+base.login是我的完整的URL，导致绕过了前端的代理。所以我应该给的是相对路径。如下：

const api = {
    // 登录功能
    login(params){
        return axios.post(base.login,params)
    }
}

这样设置以后，便可以绕过cors啦

（我这个小菜鸡真的研究了好久呜呜呜，一直不知道问题在哪。 不过还是不太懂为什么在我这里后端设置cors无法像教学那样正常通过检测）