Vue专题（五）基于webpack的Vue项目配置代理解决跨域问题

基于webpack创建的vue项目，自身会有config的配置文件

在开发过程中我们请求数据有时候调用的是第三方接口，此时便会遇到一个问题：跨域限制。一般跨域问题控制台会报这个错：

很多情况下后台会给我们做请求代理，当后台没有帮你的时候只能自己解决了，Vue-cli这里我用的是webpack，那么我们需要在webpack上做代理设置，具体步骤如下：

1. 假设接口地址没有项目名（个人叫法），例如：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)
      })
    }
  }
}

这里通过axios请求数据时路径‘formDef/query’，实际地址是localhost:89/formDef/query

2. 假设接口地址存在项目名（个人叫法），例如：http://localhost:89/tabForm/formDef/query;

整个项目的接口地址都有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)
      })
    }
  }
}

这里通过axios请求数据时路径‘formDef/query’，实际地址是localhost:89/tabForm/formDef/query

此时webpack的代理配置已经完成，需要重启服务。

Vue专题（五）基于webpack的Vue项目配置代理解决跨域问题

猜你喜欢