Detailed explanation of Vue configuration request multiple server solutions

1. Solution

1.1 Describing the interface context-path

The two backend interface service request prefixes are as follows:

• Prefix 1: /bryant
• Prefix 2: /

1.2 vue.config.js configuration

devServer: {
 port: 8005,
 proxy: {
  // First server configuration '/bryant': {
   target: 'http://localhost:8081,
   ws: true,
   changeOrigin: true,
   pathRewrite: {
    '^/bryant': '/bryant'
   }
  },
  // Second server configuration '/': {
   target: 'http://localhost:8082',
   ws: true,
   changeOrigin: true,
   pathRewrite: {
    '^/': '/'
   }
  } 
 }
} 

1.3 axios modification

// api base_url, set prefix does not exist const BASE_URL = ''
// Create an axios instance const service = axios.create({
 baseURL: BASE_URL, 
 timeout: 6000 // request timeout})

At this time, axios does not need to directly specify the baseUrl configuration

1.4 Sending a request

// The 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 at the end of the proxy configuration. When proxying, it is searched from top to bottom. If it is placed at the top, other services will also be proxied by this configuration.

This is the end of this article about the detailed explanation of the solution of Vue configuration requesting multiple servers. For more relevant Vue configuration requesting multiple servers, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!