axios请求中跨域及post请求问题解决方案

闲话很少说，用到vue的童鞋们应该大部分都会遇到请求中的各类奇葩问题，昨天研究一天，终于搞出来个因此然了，写篇文章拯救一下广大的童鞋们，某度娘固然也能够搜到，但通常解决了一个问题后就会出现另一个问题，一个接一个，不断的问题涌如今个人console里面。印象中，我应该遇到过403,405,302,这几个错误，403错误一般是由于跨域请求无权限，而405是由于方法不容许method not allowed,偶尔还会遇到302的错误。如下是我在换了无数次配置后的最好的解决方案了。

1.首先，本地请求测试环境的接口须要跨域，解决跨域问题固然用配置就解决了，找到config/index.js文件中的module.exports中的dev

proxyTable: {
        '/api': {
            target: 'https://api.douban.com',//设置你调用的接口域名和端口号 别忘了加http
            changeOrigin: true,
            pathRewrite: {
              '^/api': '' //这里理解成用‘/api’代替target里面的地址，后面组件中咱们掉接口时直接用api代替 好比我要调用'https://api.douban.com/user/add'，直接写‘/api/user/add’便可，此处的‘api’能够设置为本身想要设置的任何词语，符合规范便可
            }
        }
    },

2.在vue的项目入口文件main.js中，引入咱们所须要axios(已经封装好的ajax，也能够用fetch，可是兼容性不如axios好)，同时须要引入qs模块(咱们在作post请求的时候须要用到)

import axios from 'axios' // 引入axios 
import qs from 'qs' // 引入qs
Vue.prototype.$http = axios;
Vue.prototype.HOST = '/api' // 此处可根据我的习惯设置 此处的‘api’ 跟index.js中的‘api’一致，则全部的请求只须要使用this.HOST便可

//添加请求拦截器
axios.interceptors.request.use(function (config) {
  config.headers['Content-Type'] = 'application/x-www-form-urlencoded'
  if(config.method === 'post') { // post请求时，处理数据
      config.data = qs.stringify( {
          ...config.data //后台数据接收这块须要以表单形式提交数据，而axios中post默认的提交是json数据,因此这里选用qs模块来处理数据，也有其余处理方式，但我的以为这个方式最简单好用
      })
  } 
  return config;
}, function (error) {
  loadinginstace.close()
  return Promise.reject(error);
})
//添加响应拦截器
axios.interceptors.response.use(function(response){
  return response;
},function(error){
 return Promise.reject(error);
});

3.在vue文件中的使用方法，get与post方法都可~

// 如下为请求测试环境的get接口测试
  this.$http.get(this.HOST + '/init',{
    params:{
      "cityCode":"010"
    }
  }).then((response) => {
    console.log("get:"+response.data);
  });

  // 如下为请求测试环境的post接口测试 处理数据这块儿，试用过不少种方法，没效果…… 例如 用字符串拼接，以及用params.append,亲测数据丢失，嗯，仍是乖乖的用qs吧……
  let url = this.HOST + '/mod';
  let data = {
    "savestatus":1,"favType":1,"tag":"danny"
  };
  this.$http.post(url,data).then((response) => {
      console.log("post:"+response.data);
  })
  // 如下为请求本地json文件的方法，本地json文件必须放在最外层的static/xxx.json
  this.$http.get("../static/datagrid_data1.json").then(response => {  
    console.log("static:"+response.data); 
  });

全部请求均成功！！！开森~~~ 撒花
以上就是整个axios的跨域以及post请求的解决方案。若是你们还有其余更好的建议，欢迎私信我补充，或者评论补充~~