Explanation of vue configuration requests multiple server side solutions

1. Solutions

1.1 Describe the interface context-path

The two interface service request prefixes of the back end are as follows:

Prefix 1:/bryant Prefix 2:/

1.2 vue. config. js configuration

devServer: {
 port: 8005,
 proxy: {
  //  No. 1 1 Server Configuration  
  '/bryant': {
   target: 'http://localhost:8081,
   ws: true,
   changeOrigin: true,
   pathRewrite: {
    '^/bryant': '/bryant'
   }
  },
  //  No. 1 2 Server Configuration  
  '/': {
   target: 'http://localhost:8082',
   ws: true,
   changeOrigin: true,
   pathRewrite: {
    '^/': '/'
   }
  } 
 }
} 

1.3 axios amendments

// api base_url Setting prefix does not exist 
const BASE_URL = ''
//  Create  axios  Instances 
const service = axios.create({
 baseURL: BASE_URL, 
 timeout: 6000 //  Request timeout 
})

In this case, axios does not need to specify baseUrl configuration directly

1.4 Sending a Request

//  Request prefix is " / " 
this.$http.get("/basketball").then(res => {
 console.log('/', res)
}).catch(err => {
 console.log(err)
})
//  Request prefix is " bryant " 
this.$http.get("/bryant/mvp").then(res => {
 console.log('/bryant', res)
}).catch(err => {
 console.log(err)
})

Summarize

In the case of multiple interface services, if the prefix is "/", it should be placed in the last part of proxy configuration, and the proxy is searched from top to bottom. If it is placed at the top, other services will also be proxy by this configuration