Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

prepareProxy ignores changeOrigin

See original GitHub issue

Is this a bug report?


Did you try recovering your dependencies?


Which terms did you search for in User Guide?

proxy, changeOrigin


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


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.)
    "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.

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:9 (3 by maintainers)

github_iconTop GitHub Comments

kenlyoncommented, Nov 28, 2018

@tabrindle Here you go:

    OS: Windows 10
    CPU: (8) x64 Intel(R) Core(TM) i7-4770 CPU @ 3.40GHz
    Node: Not Found
    Yarn: Not Found
    npm: 5.8.0 - C:\Program Files\nodejs\npm.CMD
    Edge: 42.17134.1.0
    Internet Explorer: 11.0.17134.1
    react: ^16.5.2 => 16.6.0
    react-dom: ^16.5.2 => 16.6.0
    react-scripts: Not Found
    create-react-app: Not Found
stale[bot]commented, Feb 15, 2019

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

vue.js - webpack dev-server: Avoid proxy errors on HTTP ...
This error message comes from node_modules/@vue/cli-service/lib/util/prepareProxy.js , which define a onError callback for node-http-proxy ;.
Read more >
webpack dev-server: Avoid proxy errors on HTTP errors ...
This error message comes from node_modules/@vue/cli-service/lib/util/prepareProxy.js , which define a onError callback for node-http-proxy ;.
Read more >
Proxying API Requests in Development - Create React App
This way, when you fetch('/api/todos') in development, the development server will recognize that it's not a static asset, and will proxy your ...
Read more >
prepareProxy.js | searchcode
/core/dev-utils/prepareProxy.js ... setHeader('origin', target) 60 } 61 }, 62 onError: onProxyError(target), 63 secure: false, 64 changeOrigin: true, ...
Read more >
viewstools/morph/ - UNPKG
n )\n console.log(\n 'To ignore, add ' +\n chalk.cyan('// ... proxySetting = appPackageJson.proxy\n const proxyConfig = prepareProxy(proxySetting, paths.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found