We Keep Coding

Error React Proxy error: Could not proxy request

Why do I got this error:
Proxy error: Could not proxy request /api/v1/management/me from localhost:3000 to http://localhost:8080 (ECONNREFUSED).
Got this axios setting:
axios.defaults.baseURL = "http://localhost:3000/";
And set this in package.json:
"proxy": "http://localhost:8080"
tried also:
"proxy": "http://localhost:8080/"
And have following call:
axios({
method: "get",
url: "api/v1/management/me",
data: {},
headers: { crossDomain: true },
})
When I call directly http://localhost:8080/api/v1/management/me I got response from server.
I have following backend, Vapor route setting. Maybe something wrong / specific here?
let protectedAPIRouter = authSessionRouter.grouped("api/v1").grouped(User.guardAuthMiddleware())
let managementAPIRouter = protectedAPIRouter.grouped("management")

I would suggest the following solutions:
Try to change localhost to IP address: "proxy": "http://your_IP_address:8080"
Try this construction also:
"proxy": {
"/api/*": {
"target": "http://localhost:8080",
"secure": false
}
}

You need to set up a proxy to the backend service you want to access.
First install (http-proxy-middleware) package.
Remove the ("proxy": "http://localhost:8080/") or the Url behind the proxy in the package json file.
In the src folder create a file (setupProxy.js) and and the following code.
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
app.use(
'/api',
createProxyMiddleware({
target: 'http://localhost:8080',
changeOrigin: true,
})
);
};

I solved this issue change localhost to 127.0.0.1 in the package.json over the client project.

How to proxy particular host using http-proxy-middleware?

I am using http-proxy-middleware to proxy hosts in my React project.
Below is the code from setupProxy.js file:
const {createProxyMiddleware} = require('http-proxy-middleware');
module.exports = function(app) {
app.use('/api', createProxyMiddleware({ target: 'http://localhost:8080', changeOrigin: true, }));
app.use('/api/user/logout', createProxyMiddleware({ target: 'http://localhost:9091', changeOrigin: true, }))
};
As you can see I added two proxy codes. For the logout, I want to use a different host. /api is working fine, but the /api/user/logout is not working.
Thanks in advance.

Because when the request goes to '/api/user/logout'.
app.use('/api') finds '/api' in the url and it fits the condition of the first app.use
You need to use regExp
app.use(/\/api\/?$/, createProxyMiddleware())

http-proxy-middleware does not forward any of the path

I am trying to configure a proxy for my API requests using http-proxy-middleware, which the create react app docs suggest. I set up my proxy like this, in the setupProxy.js file:
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function (app) {
app.use(
createProxyMiddleware("/post", {
target: 'https://postman-echo.com',
changeOrigin: true,
logLevel: 'debug'
})
);
};
then, I do a simple POST to an endpoint:
const response = await fetch("/post", {
method: 'POST',
headers: {
'content-type': 'application/json;charset=UTF-8'
},
body: JSON.stringify({ foo1: "bar1", foo2: "bar2" })
});
console.log(await response.json());
According to the http-proxy-middleware docs, I should expect a proxy that does something like this:
[HPM] POST /post -> https://postman-echo.com/post
But instead, the debugger shows this:
[HPM] POST /post -> https://postman-echo.com
The path, /post, does not get appended to the proxy request. The target should actually be https://postman-echo.com/post. My client gets a 404 error because https://postman-echo.com on its own does not match anything on the backend.
If it did reroute correctly, I should expect the same results as a CURL request
curl -X POST -F 'foo1=bar1' -F 'foo2=bar2' https://postman-echo.com/post
{"args":{},"data":{},"files":{},"form":{"foo1":"bar1","foo2":"bar2"},"headers":{"x-forwarded-proto":"https","x-forwarded-port":"443","host":"postman-echo.com","x-amzn-trace-id":"Root=1-61200c54-7b5809be3e78040f09edcd42","content-length":"240","user-agent":"curl/7.64.1","accept":"*/*","content-type":"multipart/form-data; boundary=------------------------bb54b419e41f4a4a"},"json":null,"url":"https://postman-echo.com/post"}%
But I 404 because the path is not added. Why is the path being left out?
I created a simple app that recreates my issue. This looks similar to this issue but they are not the same (I am using the same syntax as the answer suggests).

I got it working. The problem was that I was testing with an endpoint that 404'd. I got confused because the debugger doesn't append /post to the end of the log like the docs say it should.

hapi.js cors with auth

Put together the below.
server.route([
{
method: "POST",
path: "/authorize",
config: {
auth: false,
cors: {
origin: ['*']
}
},
handler: (request, reply) => {
...
reply.redirect(redirectUrl)
}
}
])
I want to use with client-side JavaScript browser fetch API. The cors part is necessary to avoid using the no-cors mode for fetch and to get a non-opaque response.
If I use only 'authin the config section or onlycors` they work fine, but together hapi complaints that the configuration is wrong.
Why is that?

inside config object you cannot use key cors. for correct configuration you have to put cors key inside this like this
server.connection({
port: dbConfig.port,
routes: { cors: true } // set cross origin by hapi inbuilt property
// tls: tls
})

Rewriting Webpack Proxy URLs

I'm using Webpack Dev Server to proxy my files from an external url, that's because I'm using it to develop locally and proxying the PHP/Twig files from the server, so that way I don't need to set up all the back-end locally.
But the problem is that I need to rewrite the assets urls to pull these files from my local machine, not from the proxy. Right now, when I open my localhost, all the assets are being loaded from the server. i.e: http://mycoolwebsite.com/core/somefolder/assets/styles.css
And I need to replace that to pull from my localhost, like this:
/assets/styles.css
This is what I have now:
devServer: {
compress: true,
port: 9000,
proxy: {
'*': {
target: 'http://mycoolwebsite.com',
changeOrigin: true,
secure: false
}
}
Any clue?
Thanks!

you want all request that go to your server "http://mycoolwebsite.com/**"
to go to your local machine: "http://localhost:9000/" (assuming its running on port 9000)
so try this:
proxy: {
'/assets/**': {
target: 'http://localhost:9000',
secure: false,
pathRewrite: function(req, path) {
//use the pathRewrite to modify your path if needed
return path;
}
}
now it shouldn't make any difference what server you are actually calling. every request that includes '/assets/' should go to your localhost. (I can not test it atm)