Proxy with http-proxy-middleware not working

[jagrajbains]

Hi,

I am working on an ecom web application with front-end on Nextjs and backend on Java springboot.
Problem:
I have a Login component where I am making an authentication request to the backend server with the username and password.
After a successful login I receive a jwt token. I add that token to the req headers with this line Axios.defaults.headers.common['Authorization'] = Bearer ${res.data.jwt}
then, I make a subsequent request to the backend to get some data where I should receive an array of states.
The request needs me to add the jwt token in the headers which I did.
But, I receive this error

What I have tried till now:
I have tried to use the reverse-proxy-with-custom-server example
I have tried to use http-proxy-middleware to proxy the request in /pages/api/[...slug].js (This I believe should only work on the server side)

What I want to do:
I would like to make the request from the Login component and not receive the CORS error. If it were a React application: I would have added the proxy in the package.json file and it should have worked or used the webpack config to configure a proxy.
I know that this is a common request but, I am unable to find an answer anywhere with a clear explanation. Hence, I turn to this community. I have spent the last 5 days looking for a solution to no avail. Any help in this matter would be really appreciated. Thank you for your service and time in advance.