Vue Special Topic (5) Webpack-based Vue project configuration proxy solves cross-domain issues

The vue project created based on webpack will have its own config configuration file.

During the development process, we sometimes call third-party interfaces when requesting data. At this time, we encounter a problem: cross-domain restrictions. Generally, the cross-domain problem console will report this error:

In many cases, the background will provide us with a request proxy. When the background does not help you, you can only solve it yourself. I use webpack here in Vue-cli, so we need to set the proxy on webpack. The specific steps are as follows:

1. Assume that the interface address does not have a project name (personal name), for example: http://localhost:89/tformDef/query

proxyTable: {
      '/': {
        target: 'http://localhost:89', // 参数填写被请求的地址
        changeOrigin: true, // 如果接口跨域需要配置这个参数
        secure: false // 如果是https接口需要配置这个参数
      }
    }

import axios from 'axios'
export default {
  name: 'TabForm',
  data() {
    return {
      message: ''
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      axios.post(
        '/formDef/query',
        {
          params: {
            taskID: 'Activity_1o3t03u'
          }
        }
      ).then(res => {
        console.log(res)
      }).catch(errMsg => {
        console.log(errMsg)
      })
    }
  }
}

 When requesting data through axios, the path is 'formDef/query', and the actual address is localhost:89/formDef/query

2. Assume that the interface address contains a project name (personal name), for example: http://localhost:89/tabForm/formDef/query;

The interface address of the entire project has tabForm

proxyTable: {
      '/tabForm': { // '/tabForm'为匹配项
        target: 'http://localhost:89', // 参数填写被请求的地址
        changeOrigin: true, // 如果接口跨域需要配置这个参数
        secure: false // 如果是https接口需要配置这个参数
      }
    }

import axios from 'axios'
export default {
  name: 'TabForm',
  data() {
    return {
      message: ''
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      axios.post(
        '/formDef/query',
        {
          params: {
            taskID: 'Activity_1o3t03u'
          }
        }
      ).then(res => {
        console.log(res)
      }).catch(errMsg => {
        console.log(errMsg)
      })
    }
  }
}

Here, when requesting data through axios, the path is 'formDef/query', and the actual address is localhost:89/tabForm/formDef/query

At this point, webpack's proxy configuration has been completed and the service needs to be restarted.