javascript

Ajax跨域问题解决最好方案

本文通过设置Access-Control-Allow-Origin来实现跨域。

例如：客户端的域名是client.w3cschool.cc,而请求的域名是server.w3cschool.cc。

如果直接使用ajax访问，会有以下错误：

1
XMLHttpRequest cannot load http://server.w3cschool.cc/server.php. No 'Access-Control-Allow-Origin' header is present on the requested resource.Origin 'http://client.w3cschool.cc' is therefore not allowed access.

1、允许单个域名访问

指定某域名（http://client.w3cschool.cc ）跨域访问，则只需在http://server.w3cschool.cc/server.php 文件头部添加如下代码:

header('Access-Control-Allow-Origin:http://client.w3cschool.cc');

2、允许多个域名访问

指定多个域名（http://client1.w3cschool.cc 、http://client2.w3cschool.cc 等）跨域访问，则只需在http://server.w3cschool.cc/server.php 文件头部添加如下代码:

1
2
3
4
5
6
7
8
9
10
$origin = isset($_SERVER['HTTP_ORIGIN'])? $_SERVER['HTTP_ORIGIN'] : '';    
    
$allow_origin = array(    
    'http://client1.w3cschool.cc',    
    'http://client2.w3cschool.cc'    
);    
    
if(in_array($origin, $allow_origin)){    
    header('Access-Control-Allow-Origin:'.$origin);         
}

3、允许所有域名访问

允许所有域名访问则只需在http://server.w3cschool.cc/server.php 文件头部添加如下代码:
header('Access-Control-Allow-Origin:*');

测试代码：
server.php

1
2
3
4
5
6
7
<?php
    header('Access-Control-Allow-Origin:*'); 
    $suggest = $_POST['suggest'];
    if($suggest=='abcz'){
        echo 'success123';
    }
?>

client.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<body>
    <input type="button" value="按钮" id="btn">
    <span>abc</span>
</body>

<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script>
$("#btn").on("click",function(){
    $.post("http://test.com/server.php",{suggest:'abcz'},function(result){
        $("span").html(result);
    });
});
</script>

</html>

参考：Ajax 跨域问题解决最好方案