巩固——Vue中proxyTable代理接口的配置

说明:

proxyTable是vue-cli脚手架在开发模式下,为我们提供的一个跨域的代理中转服务器服务。它是基于http-proxy-middleware插件的。

配置:

找到config文件下的index.js中的 proxyTable ,添加:

proxyTable: {
      '/api': {    
        target: 'http://192.168.8.143:8082/api',  // 接口地址
        changeOrigin: true,  //是否跨域
        pathRewrite: {
            '^/api': '/'   //需要rewrite的,
        }              
    }
}

// secure: true, // 如果是https接口,需要配置这个参数

// ws: true, // 如果要代理 websockets, 需要配置这个参数

添加好之后,重启项目即可。

进阶:

需要代理的接口较多时,为了方便管理。我们可以在config文件下创建一个proxyConfig.js(代理接口全写这里面),添加:

module.exports = {
    proxy: {
          '/api': {    
              target: 'http://192.168.8.143:8082/api',  // 代理接口
              changeOrigin: true,  //是否跨域
              pathRewrite: {
                  '^/api': '/'   //需要rewrite的,
              }              
          }
    }
  }

然后在index.js中添加:

var proxyConfig = require('./proxyConfig')

并将proxyTable改为

proxyTable: proxyConfig.proxy,

重启项目即可。

发表评论

电子邮件地址不会被公开。 必填项已用*标注