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做代理,我也没有试过第二种,也是查阅资料总结的。