什么是跨域?
跨域,指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器施加的安全限制。所谓同源是指,域名,协议,端口均相同,只要有一个不同,就是跨域。
- http://www.xtboke.com/index.html 调用 http://www.xtboke.com/api.php (非跨域)
- http://www.xtboke.com/index.html 调用 http://www.xtboke2.com/api.php (主域名不同:xtboke/xtboke2,跨域)
- http://tool.xtboke.com/index.html 调用 http://music.xtboke.com/api.php (子域名不同:tool/music,跨域)
- http://www.xtboke.com:8080/index.html 调用 http://www.xtboke.com:8081/api.php (端口不同:8080/8081,跨域)
- http://www.xtboke.com/index.html 调用 https://www.xtboke.com/api.php (协议不同:http/https,跨域)
localhost和127.0.0.1虽然都指向本机,但也属于跨域。
解决办法:
跨域的解决办法有很多,本文主要分享一下通过设置Access-Control-Allow-Origin来实现跨域。
例如:客户端的域名是client.xtboke.com,而请求的域名是server.xtboke.com。
如果直接使用ajax访问,会有以下错误:
XMLHttpRequest cannot load http://server.xtboke.com/server.php. No 'Access-Control-Allow-Origin' header is present on the requested resource.Origin 'http://client.xtboke.com' is therefore not allowed access.
1.允许单个域名访问
指定某域名(http://client.xtboke.com)跨域访问,
则只需http://server.xtboke.com/api.php文件头部添加如下代码:
header('Access-Control-Allow-Origin:http://client.xtboke.com');
2.允许多个域名访问
指定多个域名(http://client1.xtboke.com、http://client2.xtboke.com等)跨域访问,则只需在
http://server.xtboke.com/api.php文件头部添加如下代码:
$origin = isset($_SERVER['HTTP_ORIGIN'])? $_SERVER['HTTP_ORIGIN'] : ''; $allow_origin = array( 'http://client1.xtboke.com', 'http://client2.xtboke.com' ); if(in_array($origin, $allow_origin)){ header('Access-Control-Allow-Origin:'.$origin); }
3.允许所有域名访问
允许所有域名访问则只需在http://server.xtboke.com/api.php文件头部添加如下代码:
header('Access-Control-Allow-Origin:*');
SESSION共享问题:
下面是我整理的一份PHP session跨域共享的代码示例,记录一下。
client.php tool.xtboke.com
<?php header("Content-Type:text/html;charset=utf-8"); session_start(); $token = md5(uniqid(rand(), TRUE)); $_SESSION["token"]=$token; ?> <script src="//www.xtboke.com/jquery/jquery-1.9.1.js"></script> <script type="text/javascript"> $.ajax({ type:'get', url: "https://www.xtboke.com/server.php", dataType: "jsonp", jsonp:'callback', data:{ 'cToken':"<?php echo $_SESSION['token'];?>" }, xhrFields: {withCredentials: true}, crossDomain: true, success: function(data) { $(".info").html("客户端token:" + data.cToken + "<br/>服务端token:" + data.sToken+"<br/>是否相等:" + data.ifEq); } }); </script> <div class="info"></div>
server.php music.xtboke.com
<?php session_start(); $origin = isset($_SERVER['HTTP_ORIGIN'])? $_SERVER['HTTP_ORIGIN'] : ''; $allow_origin = array( 'https://tool.xtboke.com', 'https://tool2.xtboke.com' ); if(in_array($origin, $allow_origin)){ header('Access-Control-Allow-Origin:'.$origin); //跨域且使用session时不能使用 * header("Access-Control-Allow-Credentials: true" );//是否携带cookie } $arr = array( 'cToken'=>$_GET['cToken'], 'sToken'=>$_SESSION['token'], 'ifEq'=>$_SESSION['token']==$_GET['cToken']?'yes':'no' ); $callback = !empty($_GET['callback']) ? trim($_GET['callback']) : ''; if(!empty($callback)) { echo $callback."(".json_encode($arr).")"; }else{ echo json_encode($arr); }
- 博主微信
- 请注明来意
-
- 微信公众号
- 推送资讯
-