How do you use devServer.proxy in Vue?-CodePudding

I'm currently trying to proxy my requests from my Vue app so I can send cookies back from the server that exists separate from my frontend.

I have my frontend on port 8080 and server on port 3000. However, when I try to configure my proxy to use port 3000 in Vue using devServer.proxy, it sends the request to 8080 still.

Here is my code in vue.config.js:

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'https://localhost:3000',
        ws: true,
        changeOrigin: true
      }
    }
  }
}

Here is my axios request:

axios.post(`/api/auth/login/`, loginDetails, {
        withCredentials: true, 
        credentials: 'include'
    })
    .then(function (response) {
        console.log('login response: ', response)
    })
    .catch(error => {
        console.error(error)
    });

Here is the error I get that shows the frontend is still sending to 8080:

I also tried using the following in vue.config.js and not having anything prefixed to the request url, but to no avail.

module.exports = {
  devServer: {
    proxy: 'http://localhost:3000'
  }
}

Here is the documentation that I am using https://cli.vuejs.org/config/#devserver

CodePudding user response：

Solution:

After taking a look at the server logs, I found out that the proxy was working and it was trying to find the /api/auth/login route on my server. However, I only had /auth/login so the server sent the 404 status.

I'm not sure if this is the correct way to do this, but I simply prepended the server route with /api and it worked like so:

app.use('/api/auth', authRouter)

Previously it looked like this:

app.use('/auth', authRouter)

Thank you to Estus Flask for the tips in the comments.