CODEWITHSUNDEEP
vuejs2vue-cli-3
milck
milck

Reputation: 702

How can I handle redirects in vue cli development server with a proxy?

my project setup consists of a vue application with several pages on the frontend and a flask backend.

For my development setup I am using the devServer.proxy setting in vue.config.js:

module.exports = {
  devServer: {
    proxy: "http://localhost:5000"
  }
}

This is working fine for almost all requests. The problem arises when the backend server issues a redirect request, which is obviously pointing to a URL on the backend. However in the development setup this page does not exist yet, as it is served by the webpack development server. (I am testing a login page which redirects to the actual content after successful authentication)

Ultimately I would like to rewrite the redirect to point to the according URL on the webpack server. (Well, any other working solution is welcome, too)

Does somebody know how to accomplish that?

Upvotes: 5

Views: 2952

Answers (1)

milck
milck

Reputation: 702

I figured it out:

Essentially you have to pass the option hostRewrite to rewrite redirects, f.e. if the vue dev server is running at localhost:8080:

module.exports = {
  devServer: {
    proxy: {
      ".*": {
        target: "http://localhost:5000",
        hostRewrite: "localhost:8080"
      }
    }
  }
}

Upvotes: 5

Related Questions