Solution that does not work after Vue uses Proxy proxy

vue. js configured front-end agent but failed to take effect

Record 1 recently stepped on a small pit:

After configuring the agent, please re-execute (important, very important!)

npm run dev

If the agent is still active after re-executing the command, please follow these steps to check:

Check that the proxy in the index. js file is configured correctly, as shown in the following example:

 proxyTable: {
  '/api': { // Agent ID 
  target: 'http://xxx.xxx.xxx',// The actual address pointed to 
  changeOrigin: true, //  Allow cross-domain 
  pathRewrite: {
   //  Identity replacement 
   //  The original request address is  /api/getData  Will '/api' Replace '' When, 
   //  The request address after proxy is:  http://xxx.xxx.xxx/getData
   //  If replaced with '/other', The post-proxy request address is  http://xxx.xxx.xxx/other/getData  
   '^/api': '' 
  }
  }
 },

Check whether the request path is correct, for example, the agent configured by the above party

 //  Verify that the proxy identifier is included in the original request 
 //  Please confirm the interface  http://xxx.xxx.xxx/getData Is direct access normal 
 this.$axios.get('/api/getData').then((r)=>{
       console.log(r) 
    })

Additional knowledge: vue uses proxyTable to set up interface proxies

1. Modify proxyTable in config/index. js

proxyTable: {
  '/api': {
    target: 'http://192.168.42.182:8080',
    changeOrigin: true,
    pathRewrite: {
      '^/api': '/'
    }
  },
}

2. Modify config/dev. env. js

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  API: '"/api"' //  Join this 1 Sentence 
})

3. Set baseUrl of axios

export default {
  get (url, params) {
    return axios({
      method: 'get',
      baseURL: process.env.API, //  Modify here 
      url,
      params,
      timeout: 100000
    }).then((response) => {
       return checkStatus(response)
    }).then((res) => {
       return checkCode(res)
    })
  }
}

4. Just restart the server npm run dev ~