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: react-scripts@0.6.1
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? 😄