vue 請(qǐng)求數(shù)據(jù)挺益，總結(jié)下vue跨越問題
第一種.服務(wù)器服務(wù)器不支持跨域請(qǐng)求
1.當(dāng)跨域無法請(qǐng)求的時(shí)候我們可以工程目錄下新建vue.config.js。
添加下面的代碼：
module.exports = {
proxyTable: {
'/api': {
target: 'http://api.douban.com/v2',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
},
將target設(shè)置為我們需要訪問的域名乘寒。
2.然后在main.js中設(shè)置全局屬性：
Vue.prototype.HOST = '/api'
3.我們就可以在全局使用這個(gè)域名了望众，如下：
var url = this.HOST + '/movie/in_theaters'
this.$http.get(url).then(res => {
this.movieList = res.data.subjects;
},res => {
console.info('調(diào)用失敗');
});
第二種：服務(wù)器端支持跨域
String data = JsonUtil.toJsonNonNull(pubXtzdBos);
OutputStream out = response.getOutputStream();
out.write(data.getBytes("UTF-8"));//以UTF-8進(jìn)行編碼
response.setHeader("Access-Control-Allow-Origin", "*");
//告訴瀏覽器編碼方式
response.setHeader("Content-Type","text/html;charset=UTF-8" );
就是能支持跨域那就可以使用jsonp來請(qǐng)求了。jsonp實(shí)際上就是通過添加script標(biāo)簽來添加的伞辛，
請(qǐng)求回來的數(shù)據(jù)也是js格式烂翰。axios目前還不支持，只能自己手動(dòng)創(chuàng)建script標(biāo)簽蚤氏，把請(qǐng)求的地址賦給script標(biāo)簽的src屬性甘耿，最后添加到head標(biāo)簽上，等到請(qǐng)求返回再把標(biāo)簽刪掉：
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);
}
講真竿滨，本地開發(fā)適合第一種吧 然后可以正常使用axios進(jìn)行ajax請(qǐng)求了佳恬，
但這樣只能在開發(fā)模式下才能使用捏境。打包部署的時(shí)候建議使用nginx做代理，我也沒有試過第二種毁葱，也是查閱資料總結(jié)的垫言。
