webpack设置服务器代理

服务器代理的作用

解决跨域：

原理： 利用服务器访问服务器没有跨域问题的原理

请求过程：先向代理(同源)服务器发起请求，再由代理(同源)服务器请求外部服务器

// proxy 中间件的选择项
proxyTable ： {
‘/api’: {
// 目标服务器 host
target: ‘http://10.16.85.138:8080’,
// 默认false，是否需要改变原始主机头为目标URL
changeOrigin: true,
pathRewrite: {
// 重写请求，比如我们源访问的包含/api，那么请求会将/api替换为/yh/ihr/api
‘/api’: ‘/yh/ihr/api’,
== // 重写请求，比如我们源访问的是api/old-path，那么请求会被解析为/api/new-path==
‘^/api/old-path’ : ‘/api/new-path’,
== // 同上==
‘^/api/remove/path’ : ‘/path’
},
router: {
// 如果请求接口 == ‘/api/’
== // 则重写目标服务器 ‘http://10.16.85.138:8080’ 为 ‘http://localhost:8000’==
‘/api/’ : ‘http://localhost:8000’
},
== // proxy事件: 监听请求返回事件==
onProxyRes : proxy.on(‘proxyRes’, function (proxyRes, req, res) {
console.log(‘target’, JSON.stringify(proxyRes.headers, true, 2))
});
}
}

**

在vue项目中直接用

proxyTable: {
      '/info': {
        target: 'http://wangx.jieruiedu.cc',
        changeOrigin: true,
        pathRewrite: {
          '^/info': '/info'
        }
      }
    },

**