webpack-dev-server的代理（proxy）

引入

先看一个例子：

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import axios from 'axios';
class App extends Component {

    componentDidMount(){
        axios.get('http:/www.dell-lee.com/react/api/header.json').then(res=>{
            console.log(res.data);
        });
    }

    render() {
        return (
            <div>
                Hello World
            </div>
        );
    }
}

ReactDOM.render(<App/>, document.getElementById('root'));

这是一段非常简单的用React开发的代码，也是一种非常常见的逻辑，在componentDidMount中进行网络请求。

可以看到，我们请求的URL前面的域名是写死的。可是在实际开发过程中，可能使用的是后端提供的测试服务器，而实际上线的时候使用的是别的服务器。那么正式上线的代码就需要去一个个修改请求的URL。

这样的做法显然非常麻烦，而且还有可能出错。

proxy

那么解决的方案就是使用webpack-dev-server的proxy配置项。

{
    ...,
    devServer: {
        open: true,
        hot: true,
        hotOnly: true,
        proxy: {
            '/react/api': 'http://www.dell-lee.com'
        }
    }
}

而之前使用axios请求所用的URL则可以把域名部分去掉写成/react/api/header.json。上面配置的含义就是当请求/react/api这个路径，就会自动代理到http://www.dell-lee.com/react/api。

---

现在又有一个新的问题，有些时候可能接口后端还未开发完成，仅提供了一个例如说写死数据的接口来临时使用。

例如之前例子中的header.json，后端未开发完成，于是提供了一个demo.json。

同样按照我们目前的配置，一旦后端将接口开发完成，我们需要切换接口，同样是麻烦和易出错。

那这个问题也能通过配置项来完成。

{
    ...,
    devServer: {
        open: true,
        hot: true,
        hotOnly: true,
        proxy: {
            '/react/api': {
                target: 'http://www.dell-lee.com',
                pathRewrite: {
                    'header.json': 'demo.json'
                }
            }
        }
    }
}

现在这个配置项相当于将header.json重写为demo.json。
于是就相当于请求了demo.json。当需要切换接口的时候，仅需要把'header.json': 'demo.json'这行注释掉或删除掉即可。

---

官方文档里还提供了几个比较常用的配置：

proxy: {
  "/api": {
    target: "http://localhost:3000",
    bypass: function(req, res, proxyOptions) {
      if (req.headers.accept.indexOf("html") !== -1) {
        console.log("Skipping proxy for browser request.");
        return "/index.html";
      }
    }
  }
}

bypass配置项，顾名思义就是“绕过”。这个字段对应一个函数，函数接受3个参数，分别是请求对象、相应对象、代理选项。

那么这个例子就是绕过所有的html资源的请求，直接返回/index.html。

---

默认情况下，不接受运行在 HTTPS 上，且使用了无效证书的后端服务器。如果想要接受，修改配置如下：

proxy: {
  "/api": {
    target: "https://other-server.example.com",
    secure: false
  }
}

---

如果想要请求多个路径都代理到一个域名上，换句话说请求/react/api或者/vue/api都代理到http://www.dell-lee.comn可以这样设置：

proxy: [{
  context: ["/react/api", "/vue/api"],
  target: "http://www.dell-lee.com",
}]