webpack+vue+axios 环境下的跨域问题

问题

在项目中向后端进行 ajax 请求时，出现游览器阻止跨域请求的问题。

chrome游览器报错

引入 axios，并解决跨域

1. axios 在 index.html 用 cdn 引入

2. 在 webpack.base.conf.js 文件下添加外部环境配置

externals: {
    'mint-ui': 'MINT',
    'vue': 'Vue',
    'vuex': 'Vuex',
    'axios': 'axios'
  },

3. main.js下导入

import axios from 'axios'
Vue.prototype.axios = axios
//指定json
axios.defaults.headers['Content-Type'] = 'application/json'
//url前自动加上 /api
axios.defaults.baseURL = '/api'

4. config/index.js 添加代理

proxyTable: {
    '/api':{
       target: "http://127.0.0.1/api", //这里写上ajax请求的url前部分
       changeOrigin:true,
       pathRewrite:{
         '^/api':''
       }
     }
},

通过以上设置，axios跨域操作时，游览器不再报错

5. 使用 axios 进行 ajax 请求

      this.axios({
        method: 'POST',
        url: '/auth/login',
        dataType: 'json',
        params: {
          username: this.username,
          password: this.password
        }
      }).then((response) => {
        console.log(response.headers.token)
        alert('ok')
      }).catch((e) => {
        console.log(e.response.data.message)
      })

6. 游览器不再报错

屏幕快照 2019-05-25 下午2.04.28.png