Vue axios跨域请求

1.安装axios.

	npm install axios

2.在config目录下的index.js设置proxyTable:

    proxyTable: {
      '/api':{
        target: "http://localhost:9000",
        changeOrigin: true,
        pathRewrite:{
          '^/api': ''
        }
      }
    }

3.在main.js引入axios模块:

import axios from 'axios'

Vue.prototype.$axios = axios
axios.defaults.baseURL = '/api'
Vue.config.productionTip = false

4.在App.vue添加测试方法:

 methods: {
  created: function () {
    this.testAxios1()
  },
  methods: {
    testAxios1: function () {
      console.log(this.$axios.defaults.baseURL)
      this.$axios({
        method: 'get',
        url: '/data.json'
      })
        .then(function (response) {
          console.log(response)
        })
        .catch(function (error) {
          console.log(error)
        })
    }
  }

6.本例中使用Tomcat8.5开启一个本地web服务器，然后在webapps添加data.json文件，文件内容为：

{
	"data":[	
	]
}

7.重新运行:npm run dev.
得到以下结果:

浏览器中看到的http://localhost:8083/api/data.json，并非实际访问地址，这是因为设置代理，具体路径index.js中的proxyTable中的target+this.$aixos访问的url。