webpack-dev-server proxy代理

Posted 2020-10-19 HelloHello233

一个最简单的代理例子：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 ，以上代码可以正常执行了。

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

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