Proxy to external API

[stinaq]

In the README there are instructions on how to set up a proxy for API requests in development. I have followed those instructions and it does not work as expected.

Any unrecognized request will be redirected to the specified proxy.

I have set up my proxy like so:

"proxy": "http://test.example.com/"

In the packaage.json and this eliminates the CORS error I get before I added the proxy config, but the request to the API is not working. In a component I am doing a fetch() to the address /api/recent.json which I would then expect to result in http://test.example.com/api/recent.json and I have tested that address and it works, but I get a 404 in the web console, saying http://localhost:3000/api/recent.json can't be found.

Am I missing something or should this not work?

[javlc]

Regarding the subject: Is there a way to update an existing app created with react-create-app 0.2.0 to version 0.3.0 ?

[gaearon]

Hi! Sorry for the trouble. There is a note above this section in README:

Note: this feature is available with react-scripts@0.3.0 and higher.

You are likely using 0.2.1 because it is the latest stable version. Please wait for 0.3.0 to come out.

[gaearon]

Is there a way to update an existing app created with react-create-app 0.2.0 to version 0.3.0 ?

This question is answered here: #485 (comment).

[stinaq]

I have now also tried setting up a simple HTTP Python server locally so I can monitor requests to that, and the proxy now looks like this:

"proxy": "http://localhost:8000"

And the request I do from the app looks like this:

fetch('/api', {
  method: 'get'
}).then(function(response) {
  console.log(response);
}).catch(function(err) {
  console.log(err);
});

And now I get the response:

type: "basic", url: "http://localhost:3000/api", status: 200, ok: true, statusText: "OK"

But monitoring the :8000 local server, no requests at all comes through, so it does not proxy the requests though there.

[stinaq]

Ok, that's too bad. I didn't check the version, just assumed 0.3.0 vas the latest. Perhaps add that at the top of the instructions? =)

[gaearon]

README generated in your project shouldn't have this section.
I amended the one in master to clarify this: f1b6168.
Do you think this helps, or is there a better way to phrase it?

[gaearon]

By the way, you can use 0.3.0-alpha if you really want this feature right now. To do that, you would need to set react-scripts in your package.json to 0.3.0-alpha and run npm install. Then the proxy field will work.

[stinaq]

@gaearon That amendment is very good, makes it a whole lot clearer
Will that proxy work against an external domain, like http://api.example.com, or only towards a localhost address?

[gaearon]

It should work against a remote domain.

Actually I think I'll go ahead and backport this to 0.2.x since many people are asking for it, and 0.3.0 is a bit delayed.

[stinaq]

@gaearon I can try it out against an external url as soon as you have! Or if you can point me to what I should change in order to try it out.

[stinaq]

@gaearon I had to add changeOrigin: true to the config to make it work for an external address =)

[gaearon]

Hmm, it should be there, is it not?

[gaearon]

0.2.3 is released and contains this.
Please see the instructions here.

If something doesn’t work please file an issue, preferably with a project reproducing it.
Thanks!

[stinaq]

@gaearon thank you, I missed it!