How to create a proxy in React/Webpack to call an external API
Solution 1
You probably figured it out by now but for others here is what worked for me:
"proxy": {
"/proxy": {
"target": "https://mybackend.com",
"pathRewrite": {
"^/proxy" : ""
},
"changeOrigin": true
}
}
so myreact.com/proxy/my/path
is redirected to mybackend.com/my/path
I think the error in your case is that you put the destination as a key for your proxy instead of path on your react server.
Solution 2
For my case my api was deployed on AWS, I found that setting
"changeOrigin": true
was necessary (chrome & edge worked, firefox (62.0.3) complained "Invalid CORS request").
In the documentation of webpack http proxy they say this option: (https://github.com/chimurai/http-proxy-middleware)
Tip: Set the option changeOrigin to true for name-based virtual hosted sites.
notes:
- running the api locally on same machine didn't require that for fire fox.
- firefox adds header "origin" which when I removed and resent the request worked.
- adding "changeOrigin" doesn't have side effects so I will be doing it from now on.
I'm not sure if it's a bug in firefox or what, anyway my final configuration was:
"proxy": {
"/api": {
"target": "<put ip address>",
"changeOrigin" : true
}
}
you should replace /api with the path of your api or rewrite the path as the answer above.
reknirt
Updated on June 19, 2022Comments
-
reknirt almost 2 years
I want to issue a GET request to an external API that I do not control. Because of the security on the API, my react app cannot directly make an ajax request to the endpoint. Therefore I'm trying to create a simple proxy as demonstrated here
My
package.json file
looks like this:{ "name": "my-stack", "version": "0.1.0", "private": true, "dependencies": { "react": "^15.6.1", "react-dom": "^15.6.1", "react-router-dom": "^4.2.2", "react-scripts": "1.0.13" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject" }, "proxy": { "https://gold-feed.com/paid/*": { "target": "https://gold-feed.com/paid", "changeOrigin": true } } }
And then my ajax request looks like this:
const apiUrl = 'https://gold-feed.com/paid/<apiID>/all_metals_json_usd.php'; jQuery.ajax({ method: 'GET', url: apiUrl, success: (item) => { this.props.addItem(item); } });
But it doesn't appear to be doing anything. I'm still getting the following error:
No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.
I essentially have the same issue as documented here where he is trying to create a proxy to access the Steam api.
And just a side note, I believe the create-react-app project that I'm using is piggybacking off of webpack.
-
cfg over 5 yearsHi, I've been trying this for a day now and it seems to not work at all. Using create-react-app but we've ejected. Adding a proxy object in package json with app server path endpoints to match, and outside services to hit as targets. The app still tries to hit a local route which does not exist... perhaps i'm missing a step that is not documented clearly anywhere? Alternatively, in the past I've used an express app with http-proxy to get around these CORS issues and it was pretty simple.