webpack-dev-server proxy代理

一个最简单的代理例子：index.html中有如下代码

fetch('/api/pub/article/list?pageSize=2').then((data)=>{

    return data.json()

}).then((json)=>{

    console.log(json)

})

里面访问的是相对地址，但我本地并没有服务器有提供这些api。把以上的路径补全为云服务器上的绝对路径，但是又报CORS错误。

解决办法是配置一个代理。这里通过webpack-dev-server实现，简单的配置文件如下：

module.exports = {

  entry: {

      bundle:'./main.js',

  },

  output: {

    filename: '[name].js'

  },

    devServer: {

        port: 8889,

        host: '127.0.0.1',

        proxy: {

            '/api/*': {

                target: 'http://123.207.95.11:9001'

            }

        }

    }

};

接着运行（以当前目录作为静态文件的根目录）：

webpack-dev-server --content-base ./

访问 http://127.0.0.1:8889/index.html ，以上代码可以正常执行了。

对于以上的配置和运行指令，做了如下事情：

监听 127.0.0.1:8889，以当前目录（content-base参数指令的目录）作为静态文件的根目录
访问index.html，里面发出的请求是相对地址，也就是访问了这个地址 127.0.0.1:8889/pub/.....
因为webpack-dev-server读取以上的配置文件，这个请求匹配了 /api/* ，就把这个请求转发到了对应的target处，也就是http://123.207.95.11:9001这个地址下了。也就是请求浏览器 -> webpack-dev-server -> 127.207.95.11 。
最后把响应数据传递到浏览器。也就是 127.207.95.11 -> webpack-dev-server -> 浏览器

巴特西

webpack-dev-server proxy代理

最新文章

热门文章