PHP

PHP Ajax 跨域问题最佳解决方案

2017-03-24  本文已影响390人  金星show

例如:客户端的域名是client.runoob.com,而请求的域名是server.runoob.com。
如果直接使用ajax访问,会有以下错误:

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

header('content-type:application/json;charset=utf8');  
// 指定允许其他域名访问  
header('Access-Control-Allow-Origin:*');  
// 响应类型  
header('Access-Control-Allow-Methods:POST');  
// 响应头设置  
header('Access-Control-Allow-Headers:x-requested-with,content-type');  

1、允许单个域名访问

指定某域名(http://client.runoob.com)跨域访问,则只需在http://server.runoob.com/server.php文件头部添加如下代码:

header('Access-Control-Allow-Origin:http://client.runoob.com');

2、允许多个域名访问
指定多个域名(http://client1.runoob.comhttp://client2.runoob.com等)跨域访问,则只需在http://server.runoob.com/server.php文件头部添加如下代码:

$origin = isset($_SERVER['HTTP_ORIGIN'])? $_SERVER['HTTP_ORIGIN'] : ''; ($_SERVER['HTTP_ORIGN']----获得请求访问的域名)

$allow_origin = array(
'http://client1.runoob.com',
'http://client2.runoob.com'
);

if(in_array($origin, $allow_origin)){
header('Access-Control-Allow-Origin:'.$origin);
}

3、允许所有域名访问

允许所有域名访问则只需在http://server.runoob.com/server.php文件头部添加如下代码:

header('Access-Control-Allow-Origin:*');

二。。
今天我写的是PHP AJAX JSONP使用的实例。

test.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<script src="jquery-1.5.2.min.js"></script>
<script src="ajax.js"></script>
</head>

<body>
</body>
</html>

ajax.js

$.ajax({
type : "post",
url : "ajax.php",
dataType : "jsonp",
data : {'name':'zjx'}
jsonp: "callback",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(默认为:callback)
jsonpCallback:"success_jsonpCallback",//自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名
success : function(json){
alert('success');
},
error:function(){
alert('fail');
}
});

ajax.php

<?php

$data = $_POST['name'];
$callback = $_GET['callback']; $_REQUEST['callback']
echo $callback.'('.json_encode($data).')';
exit;

?>
实例2

test.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<script src="jquery-1.5.2.min.js"></script>
<script src="ajax.js"></script>
</head>

<body>
<form name="form">
<input type="text" name="sex">
<input type="text" name="age">
<input type="button" id="btn" value="button" />
</form>
</body>
</html>

ajax.js

$(document).ready(function(){

$("#btn").click(function(k) {
    //...
    var j = $("form").serializeArray();//序列化name/value
    $.ajax({
        type: 'GET',  //这里用GET
        url: 'ajax.php?name=zjx',
        dataType: 'jsonp',  //类型
        data : '',
        jsonp: 'callback', //jsonp回调参数,必需
        async: false,
        success: function(result) {//返回的json数据
            alert(result.message); //回调输出

            result = result || {};
            if (result.msg=='err'){
                alert(result.info);
            }else if (result.msg=="ok"){
                alert('提交成功');
            }else{
                alert('提交失败');
            }

        },
        timeout: 3000
    })
    //...
});

});

ajax.php

<?php
$callback = isset($_GET['callback']) ? trim($_GET['callback']) : ''; //jsonp回调参数,必需
$date = array("name"=>$_GET['name'], "msg"=>$_GET['message']);
$date["msg"]="err";
$date["info"]="因人品问题,发送失败";
$tmp= json_encode($date); //json 数据
echo $callback . '(' . $tmp .')'; //返回格式,必需
'?>

上一篇下一篇

猜你喜欢

热点阅读