CODEWITHSUNDEEP
node.jsreactjsexpresshttp-proxy-middleware
Abhinav
Abhinav

Reputation: 21

I am having problem using http-proxy-middleware

I have two servers running in my backend, because of that I have to use the http-proxy-middleware package but I am encountering some problems.

This is my code in the frontend which is running on localhost:3000

axios("/api2/login",data)
    .then((res) => {
});

This is my code in the backend which is running on localhost:5001

const { createProxyMiddleware } = require('http-proxy-middleware');

app.use(createProxyMiddleware('/api2', {target: 'http://localhost:5001', changeOrigin: true}))

app.post("/login", (req, res, next) => {
    res.send("Logged In");
});

This code is no working showing this error in the browser's console

GET http://localhost:3000/api2/login 404 (Not Found)
Uncaught (in promise) Error: Request failed with status code 404
    at createError (createError.js:16)
    at settle (settle.js:17)
    at XMLHttpRequest.handleLoad (xhr.js:61)

I am not able to understand where I am going wrong.

Upvotes: 1

Views: 14328

Answers (3)

Abhinav
Abhinav

Reputation: 21

I followed the steps mentioned in this post along with some changes,

I changed my Axios request code to:

axios({
    method: "POST",
    data: user,
    withCredentials: true,
    url: "/api2/login",
}).then((res) => {})

Otherwise, the proxy server was treating it as a GET request.

Secondly, I changed the proxy endpoint code int the proxy server as:

app.use('/api2', createProxyMiddleware({ 
    target: 'http://localhost:5001', 
    changeOrigin: true,
    pathRewrite: {
        [`^/api2`]: '',
    },
}));

Further information about the proxy endpoint change can be found here.

Upvotes: 0

Melchia
Melchia

Reputation: 24304

If I understand correctly your server is listening on port 5001. So, you need to proxy your requests from 3000 to 5001. You can do that in the react application by setting the proxy value in package.json:

 "proxy": "http://localhost:5001",

For more information about this subject, check the docs.

Edit for the configuration explained in the comment section

First in package.json:

 "proxy": "http://localhost:5002",

Create a new server (proxyserver) which will be listening in port 5002:

const express = require('express');
const { createProxyMiddleware } = require('http-proxy-middleware'); 
const app = express(); 

// redirection for first server 5000
app.use('/api1', createProxyMiddleware({ target: 'http://localhost:5000', changeOrigin: true })); 

// redirection for second server 5001
app.use('/api2', createProxyMiddleware({ target: 'http://localhost:5001', changeOrigin: true })); 

app.listen(5002);

For the other servers (5000 and 5001) you don't need to redirect the requests. Just make sure they're listening on the right ports (5000 and 5001), for example:

const express = require('express');
const app = express(); 

app.post("/api2/login", (req, res, next) => {
    res.send("Logged In");
});

app.listen(5001);

Upvotes: 0

Andrew Halpern
Andrew Halpern

Reputation: 514

Looks like it's hitting localhost:3000 instead of localhost:5001 which is where your server is running from.

axios("http://localhost:5001/api2/login",data)
    .then((res) => {
});

You can also set the baseURL in axios. HTTP get request with Axios gets sent with the local host IP at the beginning of the URL

Upvotes: 0

Related Questions