JS跨域
客户端 localjs.php 页面
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript" src="jquery-1.9.0.js"></script> <script type="text/javascript"> //客户端服务器ip 192.168.1.101，跨域服务器ip 192.168.155.128 //原始jsonP跨域方法 function orgjsonp(){ //设置服务器回调本地的js方法名 var jsBackFun = "jsCallBackFun"; //创建一个script标签元素 var scriptDom = document.createElement("script"); scriptDom.type = "text/javascript"; scriptDom.src = "http://192.168.155.128/longserver.php?jsBackFun="+jsBackFun; //找到head第一个标签元素 var headDom = document.getElementsByTagName("head")[0]; //将新建的script元素添加到headDom第一个子标签之前（这里就是<title></title>之前） headDom.insertBefore(scriptDom, headDom.firstChild); } //jquery jsonP跨域 function jqueryjsonp(){ var jsBackFun = "jsCallBackFun"; $.ajax({ url : "http://192.168.155.128/longserver.php", type : "get", data : {'jsBackFun' : jsBackFun}, dataType : "jsonp" }); } //跨域服务器端需要回调的js方法 function jsCallBackFun(data) { alert(data.name); alert(data.age); } //JSONP跨域方式只能通过GET传值，CROS方式则可通过任何HTTP方式传值 //服务器端设置CORS客户端跨域方法，就是只在服务器端打开允许访问限制，客户端用原有的AJAX正常访问即可 function crosajax(){ var cros = true; $.post("http://192.168.155.128/longserver.php",{'cros':cros},function(data){ $.each(data,function(i,n){ alert(n); }) },"json"); } </script> </head> <body> <input type="button" value="click orgjsonp!" onclick="orgjsonp();" /> <input type="button" value="click jqueryjsonp!" onclick="jqueryjsonp();" /> <input type="button" value="click crosajax!" onclick="crosajax();" /> </body> </html>
跨域服务器端 longserver.php 页面
<?php $cros = $_POST['cros']; if(isset($cros)){ //设置CROS跨域 //允许任何域发起的请求都可以获取当前服务器的数据，这样有很大的危险性，恶意站点可能通过XSS攻击服务器 //header("Access-Control-Allow-Origin:*"); //只允许http://192.168.1.101域发起的请求都可以获取当前服务器的数据 header("Access-Control-Allow-Origin:http://192.168.1.101"); //要回传的数据 $backArr = array('name'=>'crosname','age'=>'crosage'); echo json_encode($backArr); /* 如果页面里不想使用header设置也可以在Apache服务器的httpd.conf里设置 Apache需要使用mod_headers模块来激活HTTP头的设置，找到 #LoadModule headers_module modules/mod_headers.so 将前面的 # 去掉 找到 <Directory /> AllowOverride none Require all denied </Directory> 将其中的 Require all denied 改成 Header set Access-Control-Allow-Origin * 或者 Header set Access-Control-Allow-Origin http://192.168.1.101 即可 <Directory /> AllowOverride none Header set Access-Control-Allow-Origin http://192.168.1.101 </Directory> */ }else{ //原始jsonP跨域 //要回调的js方法名 $jsBackFun = $_GET['jsBackFun']; //要回传的数据 $backArr = array('name'=>'jsonpname','age'=>'jsonpage'); //转换成json串 $backjson = json_encode($backArr); //拼接成跨域返回的字符串，就是把json串做参数放入一个可以回调的js方法里。 $resultStr = "$jsBackFun($backjson);"; //返回 echo $resultStr; }
