create-react-app: proxy in package.json not working

how do you test your proxy? using fetch / ajax / browser direct to url? the proxy in create react app only works when it’s a fetch or ajax request.

https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#proxying-api-requests-in-development

The development server will only attempt to send requests without a text/html accept header to the proxy.

Ok, so I’ve gotten past this but I’m not sure if I’m getting the expected behavior. I did a lot of messing around with this and I kinda think it came down to file structure and paths not being correct. @JustFly1984, what’s your file structure look like?

Earlier I showed that I had taken all of the react code and stuck it in the root path. Then I scrapped that and used ‘create-react-app’ to create an app inside of my api’s web project.

Finally I moved the react apps entire folder (not just its contents) to the root and it looks like it’s ok with that. I ejected from CRA in order to look at scripts and play around with them, but the only changes I made were to add logging. Here’s the current structure:

‘front-end’ the the React app.

The proxy setting is:

"proxy": "http://localhost:5000/api"

which works when the fetch request looks like:

fetch('/proposals')
      .then(response => {
        console.log(response);
        return response.json();
      })
      .then((values) => { 
        console.log(values);
        this.setState({ proposals: values.toString()}); 
      });

this renders my data like so:

What is the expected behavior for the proxy? I’m seeing that the request is still sent to port 3000 in the JS console, but I’m getting my data from my api… I can go to localhost:5000/api/proposals in the browser and get my raw json.

Should the path ‘localhost:3000/api/proposals’ work? That renders my app component with all of the data. I feel like that path shouldn’t work, but I don’t really know much about React and Webpack or best practice for this type of work yet.

I just had a similar problem: Immediately, the proxy didn’t work anymore (while it did a perfect job the day before). The problem obviously was another (stall) node process running in the background exposing a server on the exact same port I tried to forward to. The only strange thing was that I was even able to start this API server on the same port without any warning/error! So for me the solution was killing all node processes.

Folks, make sure you did not put your "proxy" entry in the "scripts" key of package.json!

I’m a giant derp and realized I had done this (which is wrong):

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "server": "node devserver.js",
    "proxy": "http://localhost:5000"
  },

I should have done this, which is correct:

"proxy": "http://localhost:5000",
"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "server": "node devserver.js"
  },

Don’t be a derp like me.

request the whole URL ‘http://localhost:5000’ in the fetch , it will cause an error which is this:

No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:8080’ is therefore not allowed access. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled. `

The browser prohibits cross-origin requests, you have to ‘say something to him’ to make him allow it this time: to solve this, you have to set the mode to cors (client side) with

fetch("http:/localhost:3000", {mode: cors})

This isn’t enough, you have to make the server support the cors mode too, so you’ll have to install the cors middleware:

npm install cors

then in your app.js (or what ever ou server file is)

app.use(cors())

you can visit the github repo of the cors module here : https://github.com/expressjs/cors

Yeah, I can confirm an issue, and expand: If I navigate to the same route pointed in proxy with usual <a href='… />, proxy is working, but with ajax/fetch/axios I’m getting call to :3000

2017-10-19 6:41 GMT+08:00 Sean McCay notifications@github.com:

Hmmm. That didn’t seem to do it either. I changed my api’s port to 5000 in case I had hit some upward limit or something and updated the proxy setting to

“proxy”: “http://localhost:5000/api”

I also tried adding a trailing '/ ’ onto the end of the proxy as well as removing the first '/ ’ from the fetch url and that didn’t make a difference.

I haven’t received any errors about the proxy so far…

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/facebookincubator/create-react-app/issues/1378#issuecomment-337748619, or mute the thread https://github.com/notifications/unsubscribe-auth/ACJseZ58w_FjH4KhbnbV8JBAj235c2R1ks5stn6KgaJpZM4Lhgrq .

Running both servers on a vm with the front ssh-forwarded to my local localhost, I couldn’t access the proxy in the browser but it was working fine with curl from the remote. To have the proxy working on my local browser, I changed: "proxy": "http://localhost:5000/api"

to

  "proxy": {
    "/api": {
      "target": "http://localhost:5000"
    }

@viankakrisna - Ah, I didn’t notice that. The underlying issue is still that the fetch makes a call to ‘localhost:3000/api/proposals’ instead of ‘localhost:56914/api/proposals’ despite having the proxy property set in package.json. What am I missing in that regard?

Thanks for the response 😄

@soggybag That is intended, has that been an issue for you?

Yeah, I wasted some time wondering why I couldn’t get to my root route.

killall node

For anyone wanting to stop all node processes.

@scriptify Worked for me 👍 😃

You need to return your response.json()

componentDidMount() {
    fetch('/api/proposals')
      .then(response => {
        console.log(response);
        return response.json();
      })
      .then((proposals) => { 
        console.log(proposals);
        this.setState({ proposals }); 
      });
}