ajax跨域(No ‘Access-Control-Allow-Origin’ header is present on the requested resource)

问题

当某域名下使用Ajax向外一个域名下的页面请求数据,会遇见跨域问题。另一个域名必须于response中补充加 Access-Control-Allow-Origin 的header,才能够给前者成功用到数。

及时句话对吗?如果对,那么流程是何等的?

跨域

怎样才能算跨域?协议,域名,端口还必须同,才好不容易在跟一个所在。

 

当跨域访问时,浏览器会发请求吗

立刻是当真困扰我们的题材,因为我们无知情浏览器会怎么开。它会不见面检讨及公一旦呼吁的地点不是与一个域之,直接就是禁止了吧? 浏览器确实有了央

自身举行了一个实验,

前端(html)

图片 1图片 2

<!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>

View Code

后台(php)

图片 3图片 4

<?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);

View Code

控制台上会见由来:

 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: *

后台代码作了部分修改之后就可以正常拿到页面的数据:

图片 5图片 6

<?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);

View Code

流动:前端域名 http://span.front.com, 后台域名 http://span.home.com

 

相关文章