webpack配置中的跨域(ProxyTable)

今天我们就来聊聊前端工程中跨域请求数据交互的问题，在以前的项目中，我们可能是通过后端配置用同源策略或是用 jsonp 的形式 去处理前后台数据交互的问题，在工程化项目中，我们用的是用代理的形式处理的。

ProxyTable

proxyTable 属性是用来配置跨域请求接口的，拿 vue-cli 举例，我们要在项目目录中找到根目录下 config 文件夹下的 index.js。因为我们在开发环境中调试，所以选择在 Dev 里面配置，类似如下：

 // 开发配置
    dev: {
        assetsRoot: path.resolve(__dirname, "../dist"),
        // 静态资源文件夹
        assetsSubDirectory: "static",
        // 发布路径
        assetsPublicPath: "/",
        // Various Dev Server settings
        host: "localhost",
        // dev-server监听的端口
        port: 8080,
        autoOpenBrowser: true,
        proxyTable: {
            //综合收件
            '/api': {
                target: "http://www.baidu.com", //开发环境
                changeOrigin: true,
                pathRewrite: {
                    '^/api': 'api'
                }
            },
        }
        //是否使用 cssSourceMap
        cssSourceMap: false
    }

上面这段代码的效果就是将本地8080端口的一个请求代理到了 www.baidu.com 这个域名下：

    'http://localhost:8080/api' => 'http://www.baidu.com'

ProxyTable 的原理

dev-server 使用了非常强大的 http-proxy-middleware 包，更多功能，请查看 官网文档 。