vue-cli 前端开发，后台接口跨域代理调试问题

时间：2023-02-08 19:48:27

使用 webpack的方式开发的时候，前台开发过程中需要调用很多后台的数据接口，但是通常前后台分离的开发方式，后台的接口数据很可能是不方便或者是不能在前端同学的电脑上运行的，也就出现了所谓的跨域问题。

当然，开发过程中可以使用模拟的json数据来替代，但是实际的测试环境，以及联调环节还是必须要运行后台开发人员的数据比较保险，特别是存在条件式的判断等问题的时候。

其实我们此时只要对脚手架的配置文件进行简单的修改就可以实现了。

第一步，实现跨域代理请求。

修改 /config/index.js 里面的 dev下的proxytable

/**
     * 前端开发数据交互node端代理的说明
     * 示例中： /api/act 代表接口的基本地址
     * @target： 目标服务器的地址
     * @ changeOrigin: 是否跨域（一般都可以设置为true）
     * @ pathRewrite:  将当前路径，重定向到目标路径，可以用于调试
     * 以下示例，即可将 this.$http.get('/api/act',...)  转发到 this.$http.get('http://localhost:8080/static/mock',...)
     */
proxyTable: {
      '/api/act': {
        target: 'http://localhost:8080/',
        changeOrigin: true,
        pathRewrite: {
          '^/api/act': '/static/mock'
        }
      }
}

经过以上设置，即可在vue文件中使用

this.$http.get('/api/act/xxx.json') 的方式请求数据，请求会自动转发到 项目目录下的 /static/mock/xxx.json

如果需要连接测试同学的服务器（通常都是局域网），就可以将上面的 target 修改为测试同学的ip及端口即可。 当然 接口规则遵循restFull最好。

第二步，实现请求类型的转发。

此时，还存在一个问题，虽然以上代理解决了请求转发的问题，能确保测试环境迁移到生产环境无须再次修改接口名称。但是标准的请求协议，可不能都用get，所以如果我们的数据是自己编写的静态json模拟数据，那它只能接受get请求，对于post put delete 等是无法正确相应的。 所以，接下来我们还需要实现将所以类型的请求转发为get请求，这样在测试环境，就可以尽情的使用静态的json文件来模拟各种请求的数据了。

在/build/dev-server.js中 大约 46行

// proxy api requests
Object.keys(proxyTable).forEach(function (context) {
的上方，增加请求类型代理的内容 
// proxy all method to GET
app.use(function(req,res,next){
  req.method = 'GET';
  next();
});

这样，就可以实现所有的请求类型全部被转为get请求进行了。 而与后台联调的时候，请求真实的接口时，请注意将这里注释掉，并重启服务。否则所有的请求都会变成get哦。

好了，这样就完美的实现了，前后端完全分离调试数据的功能了。

标签：

相关文章