2013-07-07

中转服务器JSONP跨域 & 使用CORS跨域

由于项目中使用较多前后端分离，所以跨域成了经常要面对的问题。 （1）JSONP跨域，通过中转服务器中转 跨域的一种常用方式是jsonp，如果可以修改服务器端数据的话，需要js和服务器端同时处理对接，如果没有服务器端接口的修改权限，也可以在任意自己可以修改的服务器端的域里放一个中转文件url4ajax.php

<?php
$server\_url=urldecode($\_GET\['url'\]);

$json=file\_get\_contents($server_url);

if(empty($_GET\['callback'\])){
	echo $json; //ajax json
}elseif($\_GET\['notjson'\] && $\_GET\['notjson'\]=='1'){
	echo trim($\_GET\['callback'\])."({'content':'".mysql\_real\_escape\_string(trim($json))."'})"; //ajax jsonp 返回数据不为json时，拼接成json
}else{
	echo trim($_GET\['callback'\]).'('.$json.')'; //ajax jsonp
}

这样在客户端，可以通过$.getJSON获取原本不能跨域访问的数据接口（如下代码，为客户端通过$.getJSON经由www.midurl.com跨域访问www.dataurl.com的数据）

var DataUrl = "http://www.dataurl.com/xxxxxxx;
MidUrl = "http://www.midurl.com/url4ajax.php?url=" + encodeURIComponent( DataUrl ) + "&callback=?" ;
$.getJSON(MidUrl, function(data){
    //doSomething
});

（2）CORS跨域 JSONP是跨域的常用手段，但是有个限制，就是参数传递是以http get的方式，这样在提交表单，特别是大数据量的情况下就不再适用。做手机端项目的时候，我们开始采用另一种跨域方法，基于CORS跨域，由于浏览器支持的情况，桌面端的网站还不能够采用这种方式。改方法非常方便，其实只需要在服务器端加一行 header(“Access-Control-Allow-Origin: *”); 就可以解决具体的介绍可以参考 http://blog.csdn.net/hfahe/article/details/7730944 下面是一个最简的例子服务器端

<?php
$name=$_POST\['name'\];
header("Access-Control-Allow-Origin: *");
echo "haha,your name is ".$name;

客户端

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<title>测试CROS</title>
</head>
<body>
<label>输入姓名：</label><input id="user_input" type="text"></input>
<input id="submit_btn" type="button" value="点击发送" /><br>
<label>收到反馈：<label id="respose_text" style="color:red;"></label>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
        $('#submit_btn').click(function(){
            $.ajax({
                url:'http://www.serverurl.com/test_cors.php',
                data:{name:$('#user_input').val()},
                dataType:"text", 
                type:"POST",
                success:function (result,textStatus){
                    $('#respose_text').text(result);
                }
            });
        });
</script>
</body>
</html>

原文地址: http://awebird.com/blog/art/26

aWeBird

a web bird's blog

中转服务器JSONP跨域 & 使用CORS跨域