How to configure multiple cross-domain target links in vue

  1. Business requirements. After logging in through the first target authentication, enter the secret key through the page to authenticate successfully, return the new domain name to the second target, and then use the second target to access api
  2. .
  3. Code:

vue.config.js

  devServer: {
    publicPath: baseUrl, //  baseUrl 
    proxy: {
      "/api": {
        target: "https://center.hnlianzhu.com",
        ws: true,
        changeOrigin: true,
        pathRewrite: { 
          "^/api": ""
        }
      },
      "/auth": {
        target: "https://www.baidu.com",
        ws: true,
        changeOrigin: true,
      }
    }
  },

page.vue (set target value under"/ auth")

 key.devServer.proxy["/auth"].target = this.code;

3. The problem now is that devServer does not support dynamic modification and the assignment is not successful. Because you want to return the corresponding domain name according to the secret key, you can"t write in it, how to deal with it.

Mar.30,2022

change the dev-server part of it yourself.

// proxy api requests
Object.keys(proxyTable).forEach(function (context) {
  var options = proxyTable[context]
  if (typeof options === 'string') {
    options = { target: options }
  }
  app.use(proxyMiddleware(context, options))
})

for example, change the request to / auth/xxx?proxyto=www after getting the proxy address, and then add a middleware to proxy www

when proxyto=www is captured.
Menu