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請求的解決方案。若是你們還有其餘更好的建議，歡迎私信我補充，或者評論補充~~