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

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.

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

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.

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!

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

Have you restarted the server after adding the setting?

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

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.

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.

@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 😃

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

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