I using http-proxy-middleware to configure proxy for my react app. Everything is ok if I run my app in localhost. But when I deploy to heroku, netlify or firebase, my app have an error message "You need to enable JavaScript to run this app".
My code configure proxy in react app:
module.exports = app => {
app.use(
"/pool/.json",
createProxyMiddleware({
target: "https:myapi/api",
changeOrigin: true
})
);
};
My app only have that error message when I call this api.
I tried add proxy to package.json but still not working.
Note: I don't use expressJS for my server, my backend is available.
Sorry my english is pretty bad.
Related
I'm following this tutorial to make my React app (localhost:3000) communicate with Node server (localhost:5000) .. so instead of typing <Link to='localhost:5000/auth/google'>Login with Google</Link> I only want it to be just '/auth/google', but when I click on the button with Link tag it sends this error "No routes matched location "/auth/google"
I'm using React v17.0.2
this is what's inside my setupProxy.js file
const { createProxyMiddleware } = require("http-proxy-middleware");
module.exports = function (app) {
app.use(
["/auth/google", /api/*],
createProxyMiddleware({
target: "http://localhost:5000",
changeOrigin: true,
})
);
};
the weird thing though is that I got no error when I type the route directly in the browser (both ports work just fine) and it redirect me to the page I want (handled by Express)
If there's no solution for this problem for now, is there any other way to use a proxy in a MERN application because from what I know adding "proxy" in package.json is not working anymore
I'm trying to config my Docusaurus web app to proxy the request to my api endpoint. For example, if I make a fetch request in my app fetch(/api/test), it will proxy the request from localhost:3000/api/test to my {{api_endpoint}}/api/test, but I'm still struggling to do it.
What I've done:
add a proxy field in package.json
create a setupProxy.js in the src folder
These 2 are based on the Proxying API Requests in Development
Another approach way is I created a custom webpack plugin and add it to the Docusaurus config
Does anyone have experience on this problem ? Thanks for reading, I really appreciate your help.
I went down the exact same path. Ultimately Docusaurus runs its Webpack dev server under the hood which is why the proxy field and setupProxy.js were not working as expected. I was able to get the outside API call by proxy and solved CORS errors by creating a Docusaurs plugin like you are attempting. Adding the "mergeStrategy" and "changeOrigin" were the keys to getting it all working.
// plugins/webpack/index.js
module.exports = function (context, options) {
return {
name: "cusotm-webpack-plugin",
configureWebpack(config, isServer, utils) {
return {
mergeStrategy: { "devServer.proxy": "replace" },
devServer: {
proxy: {
"/YOUR_COOL_ROUTE": {
target: "https://YOUR_COOL_API/",
secure: false,
changeOrigin: true,
logLevel: "debug",
},
},
},
};
},
};
};
spent a couple of days attempting to set up a proxy for my react app to my express backend where I am using passportjs for gooogle social auth.
react dev server on PORT 3000
express server on PORT 5000
When I click on the button, it reloads the page, but does not start the passportJS google auth process (i.e. does not redirect to the oauth2 flow).
<Button href='/auth/google'> Link Button </Button>
curl is properly proxying the calls from port 3000 to 5000
PassportJS process works properly when I go directly to the express server endpoint I created here: http://localhost:5000/auth/google
Key code pieces are below that should allow proxy to work from react frontend to express passportJS Oauth2 flow.
package.json
"proxy": "http://localhost:5000"
app.js
<a href="auth/google/" target="">
<Button> Link Button </Button>
</a>
server.js
app.get('/auth/google',
passport.authenticate('google', { scope: ['https://www.googleapis.com/auth/userinfo.email',
'https://www.googleapis.com/auth/userinfo.profile',
'openid'] }),
);
setupProxy.js
const proxy = require("http-proxy-middleware");
module.exports = function(app) {
app.use(proxy('/auth', { target: 'http://localhost:5000/' }));
};
I did not end up needing the package.json proxy entry. These are all of the pieces together that got everything to work as expected.
I have the front end application in a /client directory which is where I used create react app.
From package.json in the create react app (client directory) I deleted this as the http-proxy-middleware seems to require commonjs imports
"type": "module",
setupProxy.js
const proxy = require("http-proxy-middleware");
module.exports = function(app) {
app.use(proxy('/auth/google', { target: 'http://localhost:5000/' }));
};
App.js
using material UI button
<Button href="/api/auth/google" variant="contained" color="primary">
Index.js for passportJS config and express server
in the passportGoogle.strategy options set this to be consistent with the rest of the config
callbackURL: `/api/auth/google/callback`
app.get('/api/auth/google',
passport.authenticate('google', { scope: ['https://www.googleapis.com/auth/userinfo.email',
'https://www.googleapis.com/auth/userinfo.profile',
'openid'] }),
);
app.get('/api/auth/google/callback',
passport.authenticate('google', { failureRedirect: '/failed' }),
function(req, res) {
res.redirect('http://localhost:3000');
}
);
Google console
URIs
http://localhost:3000
Authorized redirect URIs
http://localhost:3000/api/auth/google/callback
I am developing a MERN stack app. I am using the http-proxy-middleware package for proxying API requests. At the client side, inside "src" folder, I have a file called setupProxy.js. And the code inside is as follows:
const { createProxyMiddleware } = require("http-proxy-middleware");
module.exports = function (app) {
app.use(
"/api/products",
createProxyMiddleware({
target: "http://localhost:8000",
})
);
};
As you can see, I am making a request to "/api/products".
But I am receiving error in the console. The error says:
[HPM] Error occurred while trying to proxy request /api/products from
localhost:3000 to http://localhost:8000 (ECONNREFUSED)
(https://nodejs.org/api/errors.html#errors_common_system_errors)
Also, the request is being made to "http://localhost:3000/api/products".
How can I solve this issue?
I'm trying to make a web app using rocket for the backend and react for the frontend. However, when I try to make a proxy I keep getting rayk#pop-os:~/repos/homrs/frontend$ curl http://localhost:3000/api Proxy error: Could not proxy request /api from localhost:3000 to http://localhost:8000 (ECONNREFUSED).
The things I've currently tried are adding "proxy": "http://localhost:8000" to my package.json in the application and I've always tried configuring the proxy manually as suggested here https://create-react-app.dev/docs/proxying-api-requests-in-development/#configuring-the-proxy-manually.
Here is the backend code I'm using to test:
#![feature(proc_macro_hygiene, decl_macro)]
#[macro_use] extern crate rocket;
#[get("/")]
fn index() -> &'static str {
"Hello, world!"
}
fn main() {
rocket::ignite().mount("/api", routes![index]).launch();
}
Here is the setupProxy.js I attempted to use
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
app.use(
'/api',
createProxyMiddleware({
target: 'http://localhost:8000',
changeOrigin: true,
})
);
};
I also have attempted to use http://localhost:8000 and http://localhost:8000/. I have also tried changing the rocket port from 8000 to 3001 and that also did not work.
Edit: Here is a link to the github repo: https://github.com/GimpFlamingo/homrs
The people here: https://github.com/plouc/mozaik/issues/118 were having a similar issue.
I was able to reproduce your issue and found adding address = "127.0.0.1" to Rocket.toml and then setting "proxy" to "http://127.0.0.1:8080" fixed it for me!