Ajax 跨域问题(JSONP && Access-Control-Allow-Origin)

1.使用jsonp跨域请求
2.通过设置服务端头部跨域请求
3.设置nginx/apach

使用jsonp跨域请求

什么是Jsonp

JSONP(JSON with Padding)是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问（这仅仅是JSONP简单的实现形式）。

JSONP的作用

由于同源策略的限制，XmlHttpRequest只允许请求当前源（域名、协议、端口）的资源，为了实现跨域请求，可以通过script标签实现跨域请求，然后在服务端输出JSON数据并执行回调函数，从而解决了跨域的数据请求。

使用方法

jQuery实现方式

• $.ajax

    $.ajax({  
        url:"http://aa.com/get.php?callback=?",   //注意带callback默认将回调方法名call传递后台
        dataType:'jsonp',  
        data:'',  
        jsonp:'call',  //jsonpCallback就是可以指定我们自己的回调方法名call，远程服务接受callback参数的值就不再是自动生成的回调名，而是call。dataType是指定按照JSOPN方式访问远程服务。
        success:function(data) {  
            console.log(data.value);
        },    
    });

后台接收代码

$arr=array('a'=>'A','b'=>'B');
$data=json_encode($arr);      
$callback=isset($_GET['callback'])?$_GET['callback']:'';
echo  $callback."($data)";

PS：JSONP相对简单，但只支持GET方式调用，不如POST方式安全。
PS：JSONP 服务返回打包在函数调用中的 JSON 响应，而函数调用是由浏览器执行的，这使宿主 Web 应用程序更容易受到各类攻击。如果打算使用 JSONP 服务，了解它能造成的威胁非常重要。

通过设置服务端头部跨域请求

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

允许单个域名访问

只允许接受http://art.com端发来的请求，并进行回应

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

允许多个域名访问

$origin = isset($_SERVER['HTTP_ORIGIN'])? $_SERVER['HTTP_ORIGIN'] : '';

$allow_origin = array(
'http://art1.com',
'http://art2.com'
);

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

允许所有域名访问

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

不设置类型，默认就是get

post相应模式

<?php  
$ret = array(  
'name' => isset($_POST['name'])? $_POST['name'] : '',  
'age' => isset($_POST['age'])? $_POST['age'] : ''  
);  
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');  

echo json_encode($ret);  
?>

设置nginx/apach

方法和第二种类似

//Nginx

http {
  ......
  add_header Access-Control-Allow-Origin *;
  add_header Access-Control-Allow-Headers X-Requested-With;
  add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
  ......
}

Apache :

<Directory />
......
Header set Access-Control-Allow-Origin *
</Directory>