閑話不多說,用到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請求的解決方案。如果大家還有其他更好的建議,歡迎私信我補充,或者評論補充~~