vue 請求數據,總結下vue跨越問題
第一種.服務器服務器不支持跨域請求
1.當跨域無法請求的時候我們可以工程目錄下新建vue.config.js。
添加下面的代碼:
module.exports = {
proxyTable: {
'/api': {
target: 'http://api.douban.com/v2',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
},
將target設置為我們需要訪問的域名。
2.然后在main.js中設置全局屬性:
Vue.prototype.HOST = '/api'
3.我們就可以在全局使用這個域名了,如下:
var url = this.HOST + '/movie/in_theaters'
this.$http.get(url).then(res => {
this.movieList = res.data.subjects;
},res => {
console.info('調用失敗');
});
第二種:服務器端支持跨域
String data = JsonUtil.toJsonNonNull(pubXtzdBos);
OutputStream out = response.getOutputStream();
out.write(data.getBytes("UTF-8"));//以UTF-8進行編碼
response.setHeader("Access-Control-Allow-Origin", "*");
//告訴瀏覽器編碼方式
response.setHeader("Content-Type","text/html;charset=UTF-8" );
就是能支持跨域那就可以使用jsonp來請求了。jsonp實際上就是通過添加script標簽來添加的,
請求回來的數據也是js格式。axios目前還不支持,只能自己手動創建script標簽,把請求的地址賦給script標簽的src屬性,最后添加到head標簽上,等到請求返回再把標簽刪掉:
jsonpRequest: function (a, e) {
this._ajaxTimer && clearTimeout(this._ajaxTimer);
this._ajaxTimer = setTimeout(function () {
var request_script = document.createElement('script');
request_script.setAttribute("id", "request_script");
request_script.src = 'http://xxxx'+'&t=' + Date.now();
window.callback = function (response) {
// 移除腳本
document.body.removeChild(document.getElementById('request_script'));
console.log(response.content);
}
document.body.appendChild(request_script);
}, 500);
}
講真,本地開發適合第一種吧 然后可以正常使用axios進行ajax請求了,
但這樣只能在開發模式下才能使用。打包部署的時候建議使用nginx做代理,我也沒有試過第二種,也是查閱資料總結的。