Proxy setting not being applied to api calls

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. react-scripts@0.8.3
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"
}

[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.

[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