Vue封装axios以及处理跨域问题（解决OPTIONS请求返回302错误）

安装axios

npm install axios --save

新建一个js文件，http.js，在这里我给headers自定了token，所以我们发送的请求都是非简单请求，而发送了非简单请求，就会每次发送请求的时候触发一个预检测请求，也就是options请求，所以就要实现跨域。

import axios from 'axios'
import { Message } from 'element-ui';  //element库的消息提示，可以不用
import router from "../router";
import store from '../store'

//创建axios实例
var service = axios.create({
  baseURL: '/api',
  timeout: 5000,
  headers: {
    'Content-type': 'application/json',
    'contentType': 'application/x-www-form-urlencoded',
    'token' : localStorage.getItem('userToken')
  }
})
export default {
  params(url,param,cback,reject,method){
    service({
      method: method,
      url,
      [method === 'get' || method === 'delete' ? 'params' : 'data'] : param,
    }).then(res => {
      //axios返回的是一个promise对象
      var res_code = res.status.toString();
      if (res_code.charAt(0) == 2) {
        cback(res);   //cback在promise执行器内部
      } else {
        console.log(res, '异常1')
      }
    }).catch(err => {
      if(err.response.data.msg === '请登录'){
        Message({
          showClose: true,
          message: '您的身份已过期，请重新登录',
          type: 'error'
        });
        store.dispatch('Login', null);
        router.push("/login");
      }else if(err.response.data.msg === '授权不足'){
        Message({
          showClose: true,
          message: '您的权限不足，如有需要，请联系开发人员',
          type: 'error'
        });
      }
    })
  },

  //get请求，其他类型请求复制粘贴，修改method
  get(url, param,method) {
    return new Promise((cback, reject) => {
      this.params(url,param,cback,reject,method)
    })
  },

  post(url, param,method) {
    return new Promise((cback, reject) => {
      this.params(url,param,cback,reject,method)
    })
  },

  put(url, param,method) {
    return new Promise((cback, reject) => {
      this.params(url,param,cback,reject,method)
    })
  },

  delete(url, param,method) {
    return new Promise((cback, reject) => {
      this.params(url,param,cback,reject,method)
    })
  },
}
 

main.js中引入这个文件，做全局使用

prototype属性是JS用法，每一个构造函数都有一个属性叫做原型(prototype),默认情况下prototype属性会默认获得一个constructor(构造函数)属性

//这里是vue的主js入口文件 
import Vue from 'vue'
import App from './App.vue' 
import http from './http.js'   //axios实例化后引入取名http
 
Vue.prototype.http = http   //放入全局
 
new Vue({ 
  render: h => h(App)
}).$mount('#app')

组件中调用封装的axios方式，大家记得传参数，依次是地址，参数，请求方式：

<script>
//生命周期函数
 mounted (){      
    this.http.get('banner/1').then(res=>{
        console.log(res.data)
    }) 
  } 
</script>

因为是非简单请求，肯定存在跨域问题，我当时由于没彻底解决跨域问题，导致options请求重定向我这边就报302错误。导致爬了很久坑。

• 在config文件中的index.js里面进行配置代理，我们知道同源策略只是在浏览器中存在，不存在于服务器中。因此我们可以将需要跨域请求的地址转发给我们自己的服务器然后委托服务器去请求信息。
• 在dev里面进行配置proxyTable用作代理

module.exports = {
  dev: {
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',


   proxyTable: {
      '/api': {
        target: "http://47.93.240.205:8800",  //服务器域名
        changeOrigin: true,
        pathRewrite: {
          '^/api': '/api'  // 这种接口配置出来     http://XX.XX.XX.XX:8083/api/login
        }
      }
    },