Foney
Foney
  • 发布:2017-08-21 09:29
  • 更新:2017-08-21 09:29
  • 阅读:5861

关于ajax发起跨域请求问题

分类:HTML5+

在H5+开发APP的过程中,避免不了遇到跨域问题,笔者在本次开发过程中,遇到跨域问题,足足困扰了我2天的时间,一直解决不了,毫无头绪。
接下来记录一下这次解决跨域问题的过程:
一、H5+ APP开发,APP所运行的环境和服务器所在环境不在同一域,所以第一步设置服务器端返回头文件为:response.setHeader("Access-Control-Allow-Origin", "*"); 即允许所有的请求访问,如果只针对某一个地址访问,可以设置为:response.setHeader("Access-Control-Allow-Origin", "http://xxx.xx.com"); 后面的地址即为被允许通过访问的地址。一般情况下,在服务器端设置该属性后,就可以允许跨域请求了,然而对于菜鸟的笔者来说,这仅仅是问题的开始。
二、服务器端设置允许跨域请求后,现在请求确实能够达到服务器,能够处理逻辑返回数据到前端了,但是这时问题来了,请求返回状态码明明是200,但是ajax请求死活不执行success回调,一直跑去error中,仔细检查了datatype和服务器端的对应情况,响应过来的数据确实是json,datatype设置为json,也没用,在一个问题上弄了半天没弄出来的我,考虑一下换个脑子,使用一下H5+的XMLHttpRequest跨域请求方式,于是花了一点时间去研究一下这个XMLHttpRequest。
三、查阅了H5+提供的XMLHttpRequest的文档后,写出了如下代码:
function xhrPostRequest(url,params) {
var xhr = new XMLHttpRequest();
url = "http://foney.4kb.cn/LoveSpaceServer" + url;
var data = null;
console.log("请求开始");
if (xhr) {
xhr.open('GET', url);
xhr.onreadystatechange = function(e){
switch ( xhr.readyState ) {
case 0:
console.log( "xhr请求已初始化" );
break;
case 1:
console.log( "xhr请求已打开" );
break;
case 2:
console.log( "xhr请求已发送" );
break;
case 3:
console.log( "xhr请求已响应");
break;
case 4:
console.log( "xhr请求已完成" + xhr.status);
if (xhr.status == 200) {
var data = xhr.responseBody;
console.log( "结果:" + data);
} else if(xhr.status == 500) {
console.log( "服务器端异常。" + xhr.status);
}
else {
console.log( "不允许跨域请求。" + xhr.status);
}
break;
default :
break;
}
};
xhr.timeout = 10000;
xhr.responseType = 'text';
xhr.withCredentials = true;
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.send(params);
} else {
console.log("xhr创建失败");
}
return data;
}
然而可恨的是,这串代码在浏览器中可以满足跨域请求数据,在APP中依然得不到想要的结果,问题依旧是:status=200,readyState 变为了0,但是在研究XMLHttpRequest的过程中发现,其实ajax是对XMLHttpRequest的封装,所以学习XMLHttpRequest也得到了相应的收获,接下来问题还是没解决,我只得先休息一会儿,玩一下游戏,放空一下脑子。
四、我重新回到ajax的问题上,现在来重新认识ajax,对各个属性进行解读,贴出代码:
$.ajax({
type: 'POST',
async: false,
url: "http://foney.4kb.cn/LoveSpaceServer/login/getValidateCode",
data: {
'phone':'18286006010',
'type':1
},
dataType:'json',
success: function(data){
console.log(data.msg);
},
error:function(e){
console.log("error:" + e.status + e.readyState + e.response);
}
});
type:请求方式,有POST、GET两种方式
url:服务器请求地址
data:传到服务器地址
dataType:服务器返回数据类型,这里一定要注意,服务器返回的数据类型,必须得相对应,如果只是字符串,则填写text,如果是json数据,则需要写成json,并且json格式一定要和官方给出的json格式一样。
success:ajax请求成功回调函数,这里为什么没写成服务器请求成功回调,是因为,有时候,就算服务器请求成功了,也未必能够回调到success里面,比如说dataType数据类型不对应。
error:ajax请求失败回调函数,
接下来的这个属性就是 async,这个属性就是这次我在跨域请求过程中的痛点,起初的时候我并没有管他,因为ajax请求默认就为异步,所以默认情况下,async为true ,现在说一下这个属性的作用:
async:false 同步请求,只有等服务器响应后才会执行接下来的js代码逻辑;
async:true 异步请求,在执行Ajax代码时,不会立即请求服务器,而是等js代码逻辑执行完后,再去请求服务器,服务器返回的结果在回调函数中继续处理。
所以跨域请求中必须把async设置为同步。问题解决。

1 关注 分享
2***@qq.com

要回复文章请先登录注册