问题
在某域名下使用Ajax向另一个域名下的页面请求数据,会遇到跨域问题。另一个域名必须在response中添加 Access-Control-Allow-Origin
的header,才能让前者成功拿到数据。
这句话对吗?如果对,那么流程是什么样的?
跨域
怎样才能算跨域?协议,域名,端口都必须相同,才算在同一个域。
当跨域访问时,浏览器会发请求吗
这是真正困扰我们的问题,因为我们不清楚浏览器会怎么做。它会不会检查到你要请求的地址不是同一个域的,直接就禁止了呢? 浏览器确实发出了请求
我做了一个实验,
前端(html)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ajax跨域</title> <script src="https://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $.ajax({ url:'http://span.home.com/test.php', type:'POST', data:'name=hello', dataType:'json', success:function(data){ alert(data.name); } }); }); }); </script> </head> <body> <div id="div1"><h2>使用 jQuery AJAX 获取内容</h2></div> <button>test</button> </body> </html>
后台(php)
<?php header('content-type:application:json;charset=utf8'); $name = isset($_REQUEST['name']) ? $_REQUEST['name'] : 'will'; $arr = array('id'=>1, 'name'=>$name); echo json_encode($arr);
控制台上会打出:
XMLHttpRequest cannot load http://span.home.com/test.php. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://span.front.com' is therefore not allowed access.
Access-Control-Allow-Origin
现在该 Access-Control-Allow-Origin
出场了。只有当目标页面的response中,包含了 Access-Control-Allow-Origin
这个header,并且它的值里有我们自己的域名时,浏览器才允许我们拿到它页面的数据进行下一步处理。如:
Access-Control-Allow-Origin:
http://span.front.com
如果它的值设为 *
,则表示谁都可以用:
Access-Control-Allow-Origin: *
后台代码作了部分修改之后就可以正常拿到页面的数据:
<?php header('content-type:application:json;charset=utf8'); $origin = isset($_SERVER['HTTP_ORIGIN']) ? $_SERVER['HTTP_ORIGIN'] : ''; $allow_domain = array('http://span.front.com'); if (in_array($origin, $allow_domain)) { //Access-Control-Allow-Origin:* 表示允许任何域名跨域访问 header('Access-Control-Allow-Origin:'.$origin); header('Access-Control-Allow-Methods:GET,POST,OPTIONS'); header('Access-Control-Allow-Headers:x-requested-with,content-type'); } $name = isset($_REQUEST['name']) ? $_REQUEST['name'] : 'will'; $arr = array('id'=>1, 'name'=>$name); echo json_encode($arr);
注:前端域名 http://span.front.com, 后台域名 http://span.home.com