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

silvenon · 2016-09-29T16:39:47Z

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

npm ls react-scripts: react-scripts@0.6.1
node -v: v6.3.0
npm -v: 3.10.3
Operating system: macOS Sierra (10.12)
Browser and version: Chrome 53.0.2785.116

Reproducible Demo

silvenon/demo-cra-basic-auth

The text was updated successfully, but these errors were encountered:

gaearon · 2016-09-30T13:22:17Z

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

silvenon · 2016-09-30T14:40:21Z

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 · 2016-10-01T16:24:14Z

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 · 2016-10-19T03:57:56Z

@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 · 2016-10-20T14:57:21Z

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

malone5 · 2016-10-21T13:53:52Z

@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 · 2016-10-31T17:06:44Z

@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 · 2016-10-31T17:27:16Z

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

ChrisWiles · 2016-11-03T01:35:38Z

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 · 2016-11-11T16:22:58Z

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

rksh1997 · 2016-11-28T20:29:03Z

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

lnunno · 2017-02-17T22:12:49Z

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 · 2017-02-17T22:52:46Z

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 · 2017-02-18T02:17:09Z

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

silvenon · 2017-02-18T10:31:08Z

@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 · 2017-02-20T16:33:32Z

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 · 2017-02-20T16:39:45Z

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 · 2017-02-24T17:24:55Z

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

Arvin6 · 2017-03-16T13:52:30Z

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 · 2017-03-16T13:59:17Z

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

Arvin6 · 2017-03-16T14:04:19Z

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

Timer · 2017-03-16T14:09:43Z

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

Arvin6 · 2017-03-16T18:08:30Z

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 · 2017-03-16T20:47:26Z

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

Arvin6 · 2017-03-17T17:33:43Z

@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 · 2017-03-20T12:58:27Z

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

Timer · 2017-03-20T15:18:46Z

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

bunshar · 2017-03-22T07:51:36Z

I am taking this

Timer · 2017-03-22T17:16:53Z

Okay, awesome!

codering · 2017-06-30T05:09:46Z

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 · 2017-07-04T03:49:16Z

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 · 2017-07-10T10:21:01Z

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 · 2017-07-13T08:24:43Z

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

robinvdvleuten · 2017-10-03T13:03:52Z

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

kamvoick · 2017-10-10T21:57:13Z

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 · 2017-11-01T16:09:07Z

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 · 2018-04-25T18:23:34Z

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 · 2018-05-17T12:06:25Z

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 · 2018-08-04T06:56:41Z

This work for

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

chrisdel101 · 2019-01-16T21:29:13Z

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

gaearon added the issue: proposal label Sep 29, 2016

silvenon closed this as completed Feb 18, 2017

Timer added the contributions: up for grabs! label Mar 20, 2017

Timer changed the title ~~Proxy + HTTP Basic Authentication~~ Require http:// or https:// at front of proxy URL Mar 20, 2017

Timer added difficulty: starter and removed issue: proposal labels Mar 20, 2017

Timer added this to the 0.9.6 milestone Mar 20, 2017

Timer reopened this Mar 20, 2017

Timer added contributions: claimed and removed contributions: up for grabs! labels Mar 22, 2017

bunshar mentioned this issue Mar 24, 2017

Ensure proxy url starts with http:// or https:// #1890

Merged

Timer closed this as completed Apr 15, 2017

lock bot locked and limited conversation to collaborators Jan 21, 2019

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

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

Comments

silvenon commented Sep 29, 2016 • edited Loading

Description

Expected behavior

Actual behavior

Environment

Reproducible Demo

gaearon commented Sep 30, 2016

silvenon commented Sep 30, 2016

silvenon commented Oct 1, 2016 • edited Loading

bryzettler commented Oct 19, 2016 • edited Loading

silvenon commented Oct 20, 2016

malone5 commented Oct 21, 2016

bryzettler commented Oct 31, 2016

silvenon commented Oct 31, 2016

ChrisWiles commented Nov 3, 2016 • edited Loading

pkpp1233 commented Nov 11, 2016

rksh1997 commented Nov 28, 2016

lnunno commented Feb 17, 2017

Timer commented Feb 17, 2017

Timer commented Feb 18, 2017

silvenon commented Feb 18, 2017

lnunno commented Feb 20, 2017

lnunno commented Feb 20, 2017

gaearon commented Feb 24, 2017

Arvin6 commented Mar 16, 2017 • edited Loading

wamujlb commented Mar 16, 2017

Arvin6 commented Mar 16, 2017

Timer commented Mar 16, 2017

Arvin6 commented Mar 16, 2017

viankakrisna commented Mar 16, 2017

Arvin6 commented Mar 17, 2017 • edited Loading

ebukahills commented Mar 20, 2017

Timer commented Mar 20, 2017 • edited Loading

bunshar commented Mar 22, 2017

Timer commented Mar 22, 2017

codering commented Jun 30, 2017

fecqs commented Jul 4, 2017

jdrzejb commented Jul 10, 2017

jester22 commented Jul 13, 2017

robinvdvleuten commented Oct 3, 2017

kamvoick commented Oct 10, 2017 • edited Loading

rohanricky commented Nov 1, 2017

AndrewLamYW commented Apr 25, 2018 • edited Loading

r-ashish commented May 17, 2018

cooljl31 commented Aug 4, 2018

chrisdel101 commented Jan 16, 2019 • edited Loading

silvenon commented Sep 29, 2016 •

edited

Loading

silvenon commented Oct 1, 2016 •

edited

Loading

bryzettler commented Oct 19, 2016 •

edited

Loading

ChrisWiles commented Nov 3, 2016 •

edited

Loading

Arvin6 commented Mar 16, 2017 •

edited

Loading

Arvin6 commented Mar 17, 2017 •

edited

Loading

Timer commented Mar 20, 2017 •

edited

Loading

kamvoick commented Oct 10, 2017 •

edited

Loading

AndrewLamYW commented Apr 25, 2018 •

edited

Loading

chrisdel101 commented Jan 16, 2019 •

edited

Loading