I am trying to link to a route hosted by my express API using a relative path like this:
<a href="/api/auth">Click me</a>
I have my local React app hosted on port 3000 and the API for the project hosted on port 3002, both are running in Docker containers. I have a proxy configured in my webpack-dev-server settings like this:
devServer: {
host: '0.0.0.0',
port: 3000,
proxy: { '/api': { target: 'http://api:3002', changeOrigin: true } },
stats: 'errors-only',
overlay: true,
historyApiFallback: {
index: '/',
}},
I expect that when I click this link, it should take me to localhost:3002/api/auth, but instead it takes me to localhost:3000/api/auth. I added the "changeOrigin" option after researching other answers, but that didn't solve my problem, and I may have misunderstood its use.
It is worth noting that axios requests from my React app to my API seem to be using the proxy correctly. I am only struggling to have the browser routed to an endpoint served by my API by using a link.