Proxy agent for http proxy middleware

Created by: thtliife

The Problem

As specified in issue #2998 (closed) When using the http-proxy-middleware package configured via package.json to proxy requests to an external address, no method exists to configure an agent to pass traffic through a network proxy.

The Solution

I have made changes to WebpackDevServerUtils to enable using the https-proxy-agent package to add network proxy support to the http-proxy-middleware package, via either an agent property in package.json, or a PROXY_AGENT environment variable.

Usage info has been added to the react-scripts README.md as below:

If you are behind a network proxy (common in corporate environments), and require requests to the url specified in the target property of the proxy object to be forwarded through your network proxy, you may specify an agent property in your package.json under the proxy object. The agent property must be a string value representing either the environment variable containing your network proxy configuration (case sensitive), or the proxy configuration itself, in the format:

<protocol>://[<username>:<password>@]<proxy_address>:<port>

eg: http://myproxy.com:8080

or: http://my_name:my_password@myproxy.com:8080

You may also set the network proxy for all specified proxies via an environment variable named PROXY_AGENT either in your system environment variables or your .env or .env.development files.

If the PROXY_AGENT environment variable exists, it will be used for all proxies which do not explicitly set an agent property manually. If you need to exclude a proxy from using the PROXY_AGENT value, simply set the agent property to "none".

A more complete example of using the proxy agent is:

{
  // ...
  "proxy": {
    // Matches any request starting with /api
    "/api": {
      "target": "<url_1>",
      "ws": true
      // Specify a network proxy agent for this context via environment variable
      "agent": "http_proxy"
      // ...
    },
    // Matches any request starting with /foo
    "/foo": {
      "target": "<url_2>",
      "ssl": true,
      "pathRewrite": {
        "^/foo": "/foo/beta"
      }
      // Specify a network proxy agent for this context directly
      "agent": "http://username:password@myproxy.local:8080"
      // ...
    },
    // Matches /bar/abc.html but not /bar/sub/def.html
    // Does not need to be forwarded through the network proxy as it is local to the machine
    "/bar/*.html": {
      "target": "http://localhost:5000/bar_api",
      // ...
    },
    // Matches /baz/abc.html and /baz/sub/def.html
    // Does not need to be forwarded through the network proxy as it is in the local domain, explicitly setting to none to override "PROXY_AGENT" environment variable
    "/baz/**/*.html": {
      "target": "http://apiserver.local",
      "agent": "none"
      // ...
    }
  }
  // ...
}