prepareProxy ignores changeOrigin

Is this a bug report?

Yes

Did you try recovering your dependencies?

Yes

Which terms did you search for in User Guide?

proxy, changeOrigin

Environment

NOTE: The following is not the bug. It’s the output of running npx create-react-app --info.

C:\Users\{myUserName}\AppData\Roaming\npm-cache\_npx\26236\node_modules\create-react-app\index.js

Environment Info:
(node:26236) UnhandledPromiseRejectionWarning: Error: The system cannot find the path specified.

    at Function.e.exports.sync (C:\Users\{myUserName}\AppData\Roaming\npm-cache\_npx\26236\node_modules\create-react-app\node_modules\envinfo\dist\envinfo.js:1:7778)
    at Object.copySync (C:\Users\{myUserName}\AppData\Roaming\npm-cache\_npx\26236\node_modules\create-react-app\node_modules\envinfo\dist\envinfo.js:1:104976)
    at Object.t.writeSync.e [as writeSync] (C:\Users\{myUserName}\AppData\Roaming\npm-cache\_npx\26236\node_modules\create-react-app\node_modules\envinfo\dist\envinfo.js:1:123499)
    at C:\Users\{myUserName}\AppData\Roaming\npm-cache\_npx\26236\node_modules\create-react-app\node_modules\envinfo\dist\envinfo.js:1:124274
    at Promise.all.then.e (C:\Users\{myUserName}\AppData\Roaming\npm-cache\_npx\26236\node_modules\create-react-app\node_modules\envinfo\dist\envinfo.js:1:124289)
    at <anonymous>
(node:26236) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:26236) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

Steps to Reproduce

1. Create a server that responds to OPTIONS requests by adding a Access-Control-Allow-Origin header with a value that matches the request’s “origin” header. (In my case, this is running on localhost:43222.)
2. Create a second server that contains a proxy object in package.json which redirects requests to the server created in step 1. (In my case, this is running on localhost:4000.)
   Example:

    "proxy": {
        "/[Ss]ervice": {
            "target": "http://localhost:43222",
            "ws": false
        },
        "/[Ee]ditor": {
            "target": "http://localhost:43222",
            "ws": false
        }
    }

1. Create a client app that makes a request to the server created in step 2 that will be passed on to the server created in step 1. In other words, make sure it matches a pattern defined in the proxy configuration. (In my case, this is running on localhost:3344.)
2. Using the client app, initiate the CORS request.

Expected Behavior

The CORS handshake should succeed because the server returns the provided origin as allowed.

Actual Behavior

The server returns an Access-Control-Allow-Origin header for the host name of the first server (localhost:43222), not the host name of the client (localhost:3344). This causes the client to believe that it is not allowed to proceed.

The code responsible is in packages\react-dev-utils\WebpackDevServerUtils.js:

      onProxyReq: proxyReq => {
        // Browers may send Origin headers even with same-origin
        // requests. To prevent CORS issues, we have to change
        // the Origin to match the target URL.
        if (proxyReq.getHeader('origin')) {
          proxyReq.setHeader('origin', target);
        }
      },

This seems wrong to me. The documentation states that the proxy configuration supports any configuration supported by http-proxy-middleware and http-proxy. This should include the changeOrigin option, which is being ignored here, and is false by default.

Reproducible Demo

Maybe if I get more time later, I could create a demo. I’ve already invested considerable time into debugging and finding this bug and don’t want to spend too much longer on it, if I can avoid it. Hopefully you can edit an existing project of your own to see the behaviour without needing to start from scratch.

[kenlyon]

@tabrindle Here you go:

  System:
    OS: Windows 10
    CPU: (8) x64 Intel(R) Core(TM) i7-4770 CPU @ 3.40GHz
  Binaries:
    Node: Not Found
    Yarn: Not Found
    npm: 5.8.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: 42.17134.1.0
    Internet Explorer: 11.0.17134.1
  npmPackages:
    react: ^16.5.2 => 16.6.0
    react-dom: ^16.5.2 => 16.6.0
    react-scripts: Not Found
  npmGlobalPackages:
    create-react-app: Not Found

[stale[bot]]

This issue has been automatically closed because it has not had any recent activity. If you have a question or comment, please open a new issue.