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 ，以上代码可以正常执行了。

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

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 -> 浏览器