Create-react-app: Proxy setting not being applied to api calls

[Mikeysauce]

Description

Adding "proxy": "url:port" to my package.json does not alter the port used in fetch requests.

Expected behavior

I have added "proxy": "http://localhost:8080" to my package.json within my root folder and so would expect that my fetch requests will be directed to this port.

Actual behavior

The requests are still going through to the port on which the create-react-app server is running, 3000 in this case. This has been observed using chrome network tools as well as using postman.

Environment

Run these commands in the project folder and fill in their results:

1. [email protected]
2. node: 7.2.0
3. npm: 4.0.5
4. yarn: 0.19.0-20161207.1240

Then, specify:

1. Windows 10
2. Chrome 55

Reproducible Demo

I'm not 100% sure on how to get a demo up and running, but here is the code that I am making my api call with and my package.json file for reference.

export function fetchEvents() {
  return dispatch => {
    fetch('/api/events')
      .then(res => res.json())
      .then(data => dispatch(setEvents(data.events)));
  }
}

package.json

{
  "name": "cra",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "flow-bin": "^0.36.0",
    "react-scripts": "0.8.3"
  },
  "dependencies": {
    "react": "^15.4.1",
    "react-dom": "^15.4.1",
    "react-redux": "^4.4.6",
    "react-router": "4.0.0-alpha.6",
    "redux": "^3.6.0",
    "redux-devtools-extension": "^1.0.0",
    "redux-thunk": "^2.1.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "proxy": "http://localhost:8080"
}

[gaearon]

Have you restarted the server after adding the setting?

[Mikeysauce]

Yeah restarted both the api server and the create-react-app server multiple times

[gaearon]

It does look like you're getting 400 ERROR. Doesn't this mean the request gets proxied (but server fails for some reason)?

The request would appear to be to 3000 port in the browser because that's the point of the proxy feature. It is needed so that browser lets us make the request without enabling CORS on that server. However the actual request gets proxied so while you see it as a request to 3000, CRA will pipe it to 8080 port instead, undetectable to the app itself.

[Mikeysauce]

If I change to fetch('http://localhost:8080/api/events') it works though, so the api seems to be ok

[Mikeysauce]

I was using the 8080 port for another process and didn't realise because the express server was still working fine on that port. Issue was on my end so can close this, apologies. I've changed the port and updated the package.json and it works as expected.

[gaearon]

Glad you found the issue!
Let us know if you have any other problems.

[ProductOfAmerica]

I'm having the same problem, but no matter what port I change it to, React still points api calls to http://localhost:3000/ instead of the proxy I provide.

package.json:
```{
"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^15.6.1",
"react-dom": "^15.6.1"
},
"devDependencies": {
"react-scripts": "1.0.7"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"proxy": "http://localhost:8080"
}

My Response:

Response {type: "basic", url: "http://localhost:3000/api/bots/", redirected: false, status: 401, ok: false…}
redirected:false
status:401
statusText:"Unauthorized"
type:"basic"
url:'htt:/localhost:3000/api/bots/'
```

My server is definitely running on localhost:8080, I can send requests to it. I think React is just ignoring my proxy? I've restarted both the server and React multiple times, changing ports multiple times as well. @gaearon

[juanjoseluisgarcia]

I am trying to deploy React to production and I discovered that the proxy settings are not being passed. I use nginx in production. But even in my localhost with serve -s in port 5000 the api does not even get called. I know I am doing something wrong but I do not know what it is. My settings work perfectly with npm start.

[Timer]

Proxy does not influence production at all; it's strictly for development. You need to configure your application/server to handle production requests.

[ProductOfAmerica]

@Timer never heard of that before, know a good link for me to read?

[AdityaAnand1]

@ProductOfAmerica Did you figure out the problem?

[ProductOfAmerica]

@AdityaAnand1 nope

[AdityaAnand1]

I just ended up moving all my API endpoints to /api (and my static assets to /assets)

"proxy": {
    "/api": {
      "target": "http://localhost:3001"
    },
    "/assets": {
      "target": "http://localhost:3001"
    }
  },

Now my server only cares about the /api stuff and serving static files and react handles everything else.

[irlcatgirl]

@AdityaAnand1 I'd just like to say thank you for sharing that solution. I was having issues getting the proxy setup and felt quite frustrated that fixed it and now React forwards certain requests to the API :)

[aaveen]

Hi I been trying the proxy solution to avoid the cors problems in CRA but it doesn't seem to work, i restarted my machine so many times and that made no difference. Basically the CRA is using fetchApi to call another domain (localhost:8090) which is a SpringBoot application endpoint. I added in package.json "proxy": "http://localhost:8090/" but the api still return calls with localhost:3000.
Am i missing anything else ! any help would be appreciated as I am kind of new to UI development and running out of options.
thanks
Aveen

[ekabelly]

@aaveen same problem here. been looking for a solution for hours with no luck =[

[Obsessive-Coder]

@AdityaAnand1 This worked. Thank you

[iamthuypham]

I might shred a little light for someone who runs into this issue.
Here is my proxy:

"proxy": "http://localhost:3001"

Here is my console.log(err) in fetch which shows in broswer console:

Response {type: "basic", url: "http://localhost:3000/api/user", status: 500,...}

At first, I thought, for some reason, React app does not know my proxy and assume that this is create-react-app's fault
However, I put a console.log inside the api call.

server.post('/api/user', (req, res) => {
     console.log("here");
     .....
});

And able to see "here" in server terminal.

So the proxy works, but the error message in browser is wrong and misleading! Double check!

[ylorenzana]

@iamthuypham This problem has been giving me a headache for the past two hours, I looked through the comments on all the proxy issues and nothing worked. This whole time the proxy was working, but the error kept saying the request was being made to the wrong URL, so I just assumed the proxy was not working. Would've never thought it was the browser spitting out a misleading error message. Thanks for your help!

[demicosmic]

You could also use this, to target every route
"proxy": { "/*": { "target": "http://localhost:3001" } }

[sharoneh]

I'm having the same problem as @juanjoseluisgarcia, I think it might have something to do with react router blocking calls to the backend server. I also can't quite tell how to configure the production server for these kinds of requests so any help is much appreciated!