Require http:// or https:// at front of proxy URL

[silvenon]

Description

I'm having trouble with getting the proxy feature to work. I'm not sure if it's because my API requires HTTP basic authentication. This is my code:

// package.json
{
  // ...
  "proxy": "http://localhost:4000"
}

fetch('/users', {
  headers: {
    'accept': 'application/json',
    'authorization': 'Basic ' + btoa(process.env.REACT_APP_USERNAME + ':' + process.env.REACT_APP_PASSWORD),
    'content-type': 'application/vnd.api+json',
  },
});

Expected behavior

I expected it to work, the headers are correct because http://localhost:4000/users works fine. I don't have CORS issues because I set my API to accept any origin in development, but I still want to achieve this via the proxy feature.

Actual behavior

I get this error:

Proxy error: Could not proxy request /meetings from localhost:3000 to http://localhost:9292.
See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ECONNREFUSED).

Environment

1. npm ls react-scripts: [email protected]
2. node -v: v6.3.0
3. npm -v: 3.10.3
4. Operating system: macOS Sierra (10.12)
5. Browser and version: Chrome 53.0.2785.116

Reproducible Demo

silvenon/demo-cra-basic-auth

[gaearon]

It will be hard for us to help without at least a project reproducing this.

[silvenon]

Ok, I will provide a minimal project with both the frontend and the API. The API will be written in Ruby, but hopefully that will be enough to identify the issue.

[silvenon]

Here's the demo. 😃 The only thing I have modified is adding the componentWillMount() method to the <App> component, where I make the API call.

[bryzettler]

@silvenon were you ever able to figure this out? Running into the same issue. However, I have a Rails5 server running on port 3333 in API mode which doesn't require any auth.

Proxy error: Could not proxy request /organizations from localhost:3000 to http://localhost:3333.
See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ECONNREFUSED).

[silvenon]

@BryIsAZombie unfortunately no. 😞 I suck at this stuff, hopefully someone from the team will be able to help…

[malone5]

@silvenon I am having the same exact issue you are having, so you are not alone. Will report back if I come to a solution.

[bryzettler]

@silvenon @malone5 My issue was resolved by upgrading gems in my gemfile. I was using a release candidate of rails 5 and after specifically requiring rails 5.0.0.1 and bundle installing it went away.

[silvenon]

@BryIsAZombie glad you figured it out! I'm not using Rails, though. I wonder which dependency in v5.0.0.1 fixed it…

[ChrisWiles]

I had this issue.
I thought I set my port to 3001
but when I console.log(process.env.PORT) // 3100
I'm on windows I try
set PORT=3001
still 3100
So I gave up and changed my proxy
"proxy": "http://localhost:3100"

[pkpp1233]

Also seeing this issue. However when I console.log(process.env.PORT) I notice it's null.

[rksh1997]

I had this issue right after I tried using socket.io, couldn't solve it, did you find any solution ?

[lnunno]

I'm seeing this issue also. Tried using react-scripts with python SimpleHttpServer and also ExpressJS to no avail even when trying many different ports.

[Timer]

Just ran the demo application and it worked for me.
@lnunno, can you please investigate why this happens or provide a reproducing case? Thanks!

[Timer]

@silvenon would you like to provide me with more details? 😄

[silvenon]

@Timer for some reason this bug is no longer present in that demo, I'm not sure what changed. If I had created a Yarn lockfile sooner, maybe we could've tracked it to a certain dependency, but this way I don't know.

Anyway, closing this.

[lnunno]

Steps to reproduce:

lucas@localhost ~/test-app Mon 20 Feb 2017 09:30:05 AM MST 
➜ create-react-app --version
1.0.4
$ create-react-app test-app
$ cd test-app

package.json file

{                                                                                                                                                                                                                                                             
  "name": "test-app",                                                                                                                                                                                                                                         
  "version": "0.1.0",                                                                                                                                                                                                                                         
  "private": true,                                                                                                                                                                                                                                            
  "devDependencies": {                                                                                                                                                                                                                                        
    "react-scripts": "0.9.0"                                                                                                                                                                                                                                  
  },                                                                                                                                                                                                                                                          
  "dependencies": {                                                                                                                                                                                                                                           
    "react": "^15.4.2",                                                                                                                                                                                                                                       
    "react-dom": "^15.4.2"                                                                                                                                                                                                                                    
  },                                                                                                                                                                                                                                                          
  "scripts": {                                                                                                                                                                                                                                                
    "start": "react-scripts start",                                                                                                                                                                                                                           
    "build": "react-scripts build",                                                                                                                                                                                                                           
    "test": "react-scripts test --env=jsdom",                                                                                                                                                                                                                 
    "eject": "react-scripts eject"                                                                                                                                                                                                                            
  },                                                                                                                                                                                                                                                          
  "proxy": "localhost:5001"                                                                                                                                                                                                                                   
}  

index.html file

<!doctype html>                                                                                                                                                                                                                                               
<html lang="en">                                                                                                                                                                                                                                              
  <head>                                                                                                                                                                                                                                                      
    <meta charset="utf-8">                                                                                                                                                                                                                                    
    <meta name="viewport" content="width=device-width, initial-scale=1">                                                                                                                                                                                      
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">                                                                                                                                                                                                
    <!--                                                                                                                                                                                                                                                      
      Notice the use of %PUBLIC_URL% in the tag above.                                                                                                                                                                                                        
      It will be replaced with the URL of the `public` folder during the build.                                                                                                                                                                               
      Only files inside the `public` folder can be referenced from the HTML.                                                                                                                                                                                  
                                                                                                                                                                                                                                                              
      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will                                                                                                                                                                                 
      work correctly both with client-side routing and a non-root public URL.                                                                                                                                                                                 
      Learn how to configure a non-root public URL by running `npm run build`.                                                                                                                                                                                
    -->                                                                                                                                                                                                                                                       
    <title>React App</title>                                                                                                                                                                                                                                  
  </head>                                                                                                                                                                                                                                                     
  <body>                                                                                                                                                                                                                                                      
    <div id="root"></div>                                                                                                                                                                                                                                     
    <!--                                                                                                                                                                                                                                                      
      This HTML file is a template.                                                                                                                                                                                                                           
      If you open it directly in the browser, you will see an empty page.                                                                                                                                                                                     
                                                                                                                                                                                                                                                              
      You can add webfonts, meta tags, or analytics to this file.                                                                                                                                                                                             
      The build step will place the bundled scripts into the <body> tag.                                                                                                                                                                                      
                                                                                                                                                                                                                                                              
      To begin the development, run `npm start`.                                                                                                                                                                                                              
      To create a production bundle, use `npm run build`.                                                                                                                                                                                                     
    -->                                                                                                                                                                                                                                                       
  </body>                                                                                                                                                                                                                                                     
  <script src="/myfile.js"/>                                                                                                                                                                                                                                  
  <a href="/badlink">Link to the proxy server</a>                                                                                                                                                                                                             
</html>  

In another terminal:

python -m http.server 5001

Then run the app

$ npm start
Compiled successfully!

The app is running at:

  http://localhost:3000/

Note that the development build is not optimized.
To create a production build, use npm run build.

Proxy error: Could not proxy request /myfile.js from localhost:3000 to localhost:5001.
See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (EINVAL).

Clicking on the link also causes EINVAL errors in node.

[lnunno]

Actually, my problem was not including the full URI, changing the proxy to http://localhost:5001 seems to work. The log message is misleading since it doesn't include the full URI.

[gaearon]

Perhaps we should require the proxy to be a full URL? Would you like to send a PR for this?

[Arvin6]

I have the same issue and have been suffering for two days now. I also included the full URI, still didn't work. Other than that, everything seems to be same as what Inunno has done. I have the same error going too.
Proxy error: Could not proxy request /myfile.js from localhost:3000 to localhost:5001. See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (EINVAL).

[wamujlb]

Arvin6, I have the same problem too. Don't know what to do.

[Arvin6]

If anybody could provide us with a workaround for it, it'll help us move forward with our projects. So, Captain?

[Timer]

We cannot help without a project reproducing this. Please provide one. 😄

[Arvin6]

Ahh. Got it to work. Actually my problem was in the fetch API call. Proxy had no problem. The information in here was valuable and helped me track my problem. Thank you everyone.

[viankakrisna]

@Arvin6 can you explain how you solve it? I think it will help the people who is facing a similar issue.

[Arvin6]

@viankakrisna , Surely. My problem wasn't really proxy. It was because I didn't use full URL in proxy at package.json. It needs to be 'http://localhost:[your port]' . And the other problem was that I didn't jsonify the response. I was parsing the response as is. So, adding a (response) => response.json() solved my problem.

[ebukahills]

For those having this problem, add http:// to the proxy entry in package.json thus
"proxy": "http://localhost:3001"

[Timer]

If someone wants to send a PR requiring proxy to match ^http(s)?:\/\/, that'd be great!

[bunshar]

I am taking this

[Timer]

Okay, awesome!

[codering]

I have same problem this week (on MacBook Pro)

Proxy error: Could not proxy request /myapp/webservice/v1/common/dynamic/list from localhost:9001 to http:
//localhost:8080.
See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ECONNRESET).

but my workmate (on Windows 10) is OK, 😩

[fecqs]

I have same problem this week (on Winodws)
Proxy error: Could not proxy request /user/login from localhost:3000 to http://localhost:3001/.
See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ECONNREFUSED)

[jdrzejb]

Hi,
I just wanted to post a solution that worked for me. Maybe it will save someone few hours. I am developing PHP backend (Silex). After starting server and CRA app I always got ECONNREFUSED when using built-in proxy.

Command I used to start my server before:
php -S localhost:8899 -t web

After some research I found out that this could be solved with changing localhost to 0.0.0.0:
php -S 0.0.0.0:8899 -t web

[jester22]

@jdrzejb It works! Thanks man. Saved my day. :)

[robinvdvleuten]

@jdrzejb luckily I am not the only full-stack developer using CRA and Silex, thanks!

[kamvoick]

I have faced the same issue today on Windows, but when tried run exactly the same project on macbook worked smoothly without any issues.

edit: in my case problem was with env variables which is not universal solution, but i'll explain anyway: I got client(port 3000) & server(port 5000) run concurrently. Client-react package was telling me that it can't proxy to 5000 bc my NODE_ENV was set globally on production not on dev, so my server wasn't working as it should and i solve it by "unset NODE_ENV", you can check yours by "echo $NODE_ENV" or similar

[rohanricky]

This solved the problem for me,
My app is running on localhost:3000 with a proxy to http://localhost:5000. For a particular component I specified the URL as http://localhost:3000/admin. This was giving the error.
Since I specified my app to run on localhost:3000 but gave http://localhost:3000/admin, it was producing this error. Removing http:// solved my problem.

[AndrewLamYW]

I've tried all of the solutions mentioned above but non is working for me, any new solution to this?

(Update) For my case, once I stopped using nodemon to start my server, the error never occur again. Now it's working fine when I use "node server.js".

[r-ashish]

This might be helpful for people using nodemon or other similar stuff to auto restart server, atleast for me it was.

I was using nodemon which monitors file changes and restarts the server if some change is detected.
Since on react file changes react client refreshes so the apis were called again but it failed becuase the server was restarting at that moment (because of nodemon) and so I was getting this error.

So I just had to ignore the react app directory from nodemon:

nodemon server --ignore app/

[cooljl31]

This work for

 "proxy": "http://0.0.0.0:3000"

[chrisdel101]

I have some error. Proxy error: Could not proxy request /express_backend from localhost:3000 to http://localhost:5000/. See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ECONNREFUSED).
I tried port 4000 instead of 5000 and it went away. No visible process running on 5000