vue使用经验—vue cli项目如何解决和后台交互跨域的问题

分类:计算机 | 前端 | Vue | Vue CLI 178
更新:2021-02-17 16:49:48
编辑

1 修改vue.config.js文件

对vue.config.js文件进行修改,如下:

devServer: {
    open: true, //配置自动启动浏览器
    proxy: {
      "/api": {
        target: "http://127.0.0.1:8091", // 要访问的接口域名
        ws: true, // 是否启用websockets
        changeOrigin: true, //开启代理:在本地会创建一个虚拟服务端,然后发送请求的数据,并同时接收请求的数据,这样服务端和服务端进行数据的交互就不会有跨域问题
        pathRewrite: {
          "^/api": "" //这里理解成用'/api'代替target里面的地址,比如我要调用'http://40.00.100.100:3002/user/add',直接写'/api/user/add'即可
          }
      }
    }
  }

2 axios调用

this.axios.get('/api/publisharticle/getarticlelist.do', {
                params: {
                    // prjType: prjtype
                }
            }).then(function (response) {
                window.console.log('请求服务数据:'+JSON.stringify(response.data));
            }).catch(function () {
});

如果后端的API为'/aaa/ccc',我们需要在发请求时将路径设置为'/api/aaa/ccc',这样我们的请求才会被proxy代理到。