[quiettide]

The Problem

As specified in issue #2998
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"
      // ...
    }
  }
  // ...
}

[chimurai]

A lot of tooling and programming languages use the following environment variables to configure a network proxy:

HTTP_PROXY=http://proxy.com
HTTPS_PROXY=https://proxy.com

Think it would be nice to keep this pattern.

---

Not sure redefining the "agent" option is a good idea.
Personally I would prefer keeping the existing agent interface; Configure the agent automatically when the above mentioned environment variable are present. Also allowing the developer to use their own agent when they provide one (instead of hardcoding it to https-proxy-agent).

[JCofman]

Hi @thtliife do you may know a way of using this without having to eject? There is an agent property already available but I couldn't find a way to pass down an properly configured proxy-agent object to make use of it.

[gaearon]

Please post your suggestion in #3366 and try to reach consensus with other proxy users. This option is getting really complicated and I'd like to ensure people who use it align in what they want. Thanks!