http-proxy-middleware doesn't work in react app

Question

I have proxy for one of my microservises with authentication apis

const {createProxyMiddleware} = require('http-proxy-middleware')
module.exports = function (app) {

app.use(
    '/auth',
    createProxyMiddleware({
        target: 'http://localhost:8080/api/v1/auth',
        changeOrigin: true,
    })
    );
};

When I try to fetch this api I receive 404 error

const LOGIN_URL = '/auth/login'    
const login = () => {
    if (validate()) {
        fetch(LOGIN_URL, {
                method: 'POST',
                body: JSON.stringify(formData),
                headers: {
                    'Content-Type': 'application/json',
                    'Access-Control-Allow-Origin': 'http://localhost:3000',
                    'Access-Control-Allow-Credentials': true
                },
                credentials: 'include',
            }
        ).then(response => {
            if (response.ok) {
                window.open("/", "_self")
            }
            return response.json()
        })

    }
}

If I understand proxies correctly, /auth/login have to turn into http://localhost:8080/api/v1/auth/login. But it doesn't

Answer 1

I thing you are using http-proxy-middleway to proxy request from your frontend to your backend. so then however you have not specified the path Rewrite option in your in your CreateProxyMiddleware function.so then you need to rewrite the request path before sending it to the target as well.

if you need to rewrite /auth/login to /api/v1/auth/login,

ex:-

pathRewrite: {'/auth':'api/v1/auth' //remove /auth and prepend /api/v1/auth}

Ref this link