Front-end cross domain problem solution in Vue

Recently, I encountered cross-domain problems in the development process, and searched many solutions from the Internet. Finally, a simple comb, the original rational also do not understand, if there is a mistake, please correct.

//1. In the vue.config.js file, do the following
module.exports = {
  devServer: {
    open: true.host: 'localhost'.port: 8080.https: false.hotOnly: false.proxy: {
      // The configuration values cross domains
      '/api': {
        target: 'http://192.168.2.4:10072/'.ws: true.changOrigin: true.pathRewrite: {
          '^/api': ' '
        }
      }
    }
  }
}
//target: configures the address of the cross-domain request
//changeOrigin: Whether to cross-domain
//pathRewrite: Path rewriting
Copy the code

//2. Configure the request page as follows (no special configuration is required).
const { data: res } = await this.$axios.post('/api/set/sysManage/settime', {
        username: userInfo.username,
        currenttime: this.nowtime
      })
/ / every request in front of the interface need to bring/API, such request/API will be replaced with a target of 'http://192.168.2.4:10072/'
Copy the code