描述:
需要ajax跨域请求,用cors跨域方案。
服务端设置:
header('Access-Control-Allow-Origin: http://front.ls-la.me');
header('Access-Control-Allow-Headers: X-Requested-With');
设置了:
后端需要的头信息,原生ajax以表单方式post提交数据,json数据data转换成key1=val1&key2=val2 的字符串格式
1 var ajaxHdFn = function(uri, data, cb) { 2 var getXmlHttpRequest = function() { 3 if (window.XMLHttpRequest) { 4 //主流浏览器提供了XMLHttpRequest对象 5 return new XMLHttpRequest(); 6 } else if (window.ActiveXObject) { 7 //低版本的IE浏览器没有提供XMLHttpRequest对象 8 //所以必须使用IE浏览器的特定实现ActiveXObject 9 return new ActiveXObject("Microsoft.XMLHttpRequest"); 10 } 11 12 }; 13 var xhr = getXmlHttpRequest(); 14 xhr.onreadystatechange = function() { 15 console.log(xhr.readyState); 16 if (xhr.readyState === 4 && xhr.status === 200) { 17 //获取成功后执行操作 18 //数据在xhr.responseText 19 var resJson = JSON.parse(xhr.responseText) 20 cb(resJson); 21 } 22 }; 23 xhr.open("post", uri, true); 24 xhr.setRequestHeader("DeviceCode", "56"); 25 xhr.setRequestHeader("Source", "API"); 26 xhr.setRequestHeader("Authentication", "72b32a1f754ba1c09b3695e0cb6cde7f"); 27 xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=UTF-8"); 28 var dataStr = ''; 29 for (var i in data) { 30 if (dataStr) { 31 dataStr += '&'; 32 } 33 dataStr += i + '=' + data[i]; 34 } 35 xhr.send(dataStr); 36 };
跨域相关内容
CORS跨域的常见问题以及前后端的设置:
《Ajax——CORS跨域调用REST API 的常见问题以及前后端的设置》
data = JSON.stringify(data);
xhr.setRequestHeader("Content-Type","application/json");
这样设置,可以直接传json字符串给后端。后端也要做相应处理。