Detailed explanation of the solution to request multiple servers for vue configuration

1. Solution

1.1 Describe the interface context-path

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

• Prefix 1: /bryant
• Prefix 2: /

1.2 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, the setting prefix does not existconst BASE_URL = ''
// Create an axios instanceconst service = ({
 baseURL: BASE_URL, 
 timeout: 6000 // Request timeout})

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

1.4 Send a request

// The request prefix is ​​"/"this.$("/basketball").then(res => {
 ('/', res)
}).catch(err => {
 (err)
})
// The request prefix is ​​"bryant"this.$("/bryant/mvp").then(res => {
 ('/bryant', res)
}).catch(err => {
 (err)
})

Summarize

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

This is the end of this article about detailed explanation of the solution to multiple servers for vue configuration requests. For more related content to vue configuration requests for multiple servers, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!