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!
Related
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",
},
},
},
};
},
};
};
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.
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?
Hi I been trying the proxy solution to avoid the cors problems in myapp but it doesn't seem to work, i restarted my machine so many times and that made no difference. Basically myapp using fetchApi to call another domain (localhost:8080) which is a SpringBoot application endpoint. I added in package.json "proxy": "http://localhost:8080/" but the api still return calls with localhost:3000 and i tried setupProxy.js but i faced same issue....Am i missing anything else ! any help would be appreciated...
const { createProxyMiddleware } = require("http-proxy-middleware");
module.exports = function (app) {
app.use(
"/oauth",
createProxyMiddleware({
target: "http://localhost:8080",
changeOrigin: true,
secure: false,
logLevel: "debug",
})
);
};
I removed the {} on createProxyMiddleware and it started working.
Thanks
I have two servers running on Docker. One is the react frontend at localhost:3000 while the backend runs at localhost:9000. When I go to localhost:3000/api, I want to get to the index page of the backend, which is localhost:9000.
Created a setupProxy.js file in the myApp folder created through create-react-app:
const proxy = require('http-proxy-middleware');
module.exports = function(app) {
app.use(proxy('/api', { target: 'http://backend:9000' }));
};
When I go to localhost:3000/api, I get sent to localhost:9000/api instead of localhost:9000.
http-proxy-middleware has a pathRewrite option, see the documentation.
In your particular case:
const proxy = require('http-proxy-middleware');
module.exports = function(app) {
app.use(proxy('/api', {
target: 'http://backend:9000',
pathRewrite: {'^/api' : ''}
}));
};
this should normally rewrite localhost:3000/api/endpoint to localhost:9000/endpoint.
Note that there is also a router option for more tailored behavior.