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!

[dani-mp]

Hi! I have some questions about this and I'm a bit lost.

I know how to set the proxy setting in package.json so I can fetch from an external API, but...

• What happens if I use more than one API in my app?
• Using proxy, I don't have to specify the whole URL in my fetch request, but afaik this only works in development. What's the best way to handle this for production builds using the same code?

Thanks!