4000 jquery中ajax跨域设置http header

本文从以下几种情况讨论ajax请求：

没有跨域，设置http header头部(例如authorization)；

跨域，没有设置http header头部；

跨域，设置http header头部；

题外，php发送http请求，并设置http
header头部；

Jsonp个人理解，参考

一.ajax请求，没有跨域，设置http
header头部

$.ajax({

    type: "post",

    url:"http://abc.cc/qrcode3/index.php/home/index/testpost",

    dataType: "json"

    data: {"key":"value"},

    // headers : {'Authorization':'Basic bmVvd2F5Oe4lb3dheQ=='},

    beforeSend: function(xhr) {

        xhr.setRequestHeader("Authorization", "Basic bmVvd2F5Oe4lb3dheQ==");

    },

    success: function(data){ alert(data); },

    error: function(data){ alert("error"); } ,

});

设置header头部有两种方法：
1.headers : {‘Authorization’:’Basic bmVvd2F5Oe4lb3dheQ==’}

多个头部用逗号‘，’分隔开
2.定义beforeSend方法

beforeSend: function(xhr) {

xhr.setRequestHeader(“Authorization”, “Basic bmVvd2F5Oe4lb3dheQ==”);

}

二.ajax跨域请求,没有设置http
header,

$.ajax({

    type: "post",

    url:"http://abc.cc/qrcode3/index.php/home/index/testpost",

    dataType: "jsonp"

    data: {"key":"value"},

    // headers : {'Authorization':'Basic bmVvd2F5Oe4lb3dheQ=='},

    success: function(data){ alert(data); },

    error: function(data){ alert("error"); } ,

});

服务器端代码：

public function testpost() {

    $data = $_GET['key']?$_GET['key']:"123456";

    $callback = $_GET['callback'];

    if(!preg_match("/^[0-9a-zA-Z_.]+$/",$callback)){

exit('参数错误！');

    }

    echo $callback.'('.json_encode($data).')';

    exit;

}

跨域ajax访问，使用jsonp，返回数据格式如：abc({'key':'value','key2':'value2'}),形如一个函数调用，参数为一个json数据格式

三.ajax跨域请求，设置header头部的解决办法

跨域无法直接设置header，如果跨域了还要设置http头，可以使用以下方法。

jquery实现代码如下：

$(".get_data").click(function() {

    var key = $("#user").val() + ":" + $("#pass").val();

    //base64编码

    var authKey = base64encode(key);

    $.ajax({

        type: 'GET',

        dataType: 'json',

        url: "http://abc.cc/qrcode3/home/index/testajax",

        headers: {'Authorization': 'Basic '+authKey,"lpy":"lpy"},

        success: function(data) {

            alert(data.msg+"--"+data.user);

        },

        error:function(data){

            alert("error");

        }

    });

});

 

php实现代码如下：

public function testajax() {

    // 指定允许其他域名访问  

    header('Access-Control-Allow-Origin:http://abc.cn');  

    // 响应类型  

    header('Access-Control-Allow-Methods:POST,GET');  

    // 响应头设置，允许设置Authorization和lpy这两个http头

header('Access-Control-Allow-Headers:Authorization,lpy');

 

    //获取所有的http请求头

    $header = apache_request_headers();

$data['lpy'] = $header['lpy'];

//获取authorization中的用户名和密码，并判断

    $data['user'] = $_SERVER['PHP_AUTH_USER'];

    $data['pass'] = $_SERVER['PHP_AUTH_PW'];

    if($data['user'] == "neoway" && $data['pass'] == "neoway"){

        $data['msg'] = "ok";

    }else{

        $data['msg'] = "errorjsonp";

    }

echo json_encode($data);

}

总结：

ajax跨域是不能设置http header的，为了能够设置header，需要在服务器php代码中添加header(‘Access-Control-Allow-Origin:http://abc.cn’); 允许http://abc.cn访问服务器abc.cc，再通过设置header(‘Access-Control-Allow-Headers:Authorization,lpy’);把需要设置的http
header属性添加进去，在jquery代码中通过header来设置响应的属性值，在http的请求头中就可以看到 Authorization和lpy的请求头，服务器php端通过$header
= apache_request_headers()获取http header的数组，继而可以获取到lpy的请求头的值。

四.php发送http请求，不存在跨域，有设置http
header, 示例如下：

$http_url = "http://abc.cc/qrcode3/index.php/home/index/testpost";

$opts = array(

    'http' => array(

    'method' => 'POST',

    'header' => "Content-type:application/json\r\nAuthorization:Basic bmVvd2F5Oe4lb3dheQ==",

    'content' => $encodeString  //body内容，传递的参数

    )

);

$context = stream_context_create($opts);

echo  $res = file_get_contents($http_url, false, $context);

设置多个header信息时，中间的换行使用\r\n

$encodeString为body内容，传递的参数

五.jsonp的理解

JSONP请求不是一个真正的Ajax调用。它将一个脚本标签到您的网页和浏览器然后请求脚本SRC文件。生成的脚本，返回执行和沟通后的结果通过JavaScript执行（调用回调函数），这是为什么要设置jsonpcallback的原因。因为请求是通过一个脚本标签插入而不是直接的Ajax调用生成的，是没有能力去设置请求头。为了防止被攻击，对jsonpcallback的值要进行匹配，屏蔽常见特殊字符”
<> ()’”;. {}“，以下这些字符，经常会用到xss里面的，防止xss攻击。

感兴趣的可以看看这几篇文章，分析京东商城jsonp漏洞（文章比较早）：
http://blog.chacuo.net/295.html http://blog.chacuo.net/304.html http://blog.chacuo.net/323.html

参考：

http://www.cnblogs.com/aheizi/p/5031516.html
http://kb.cnblogs.com/page/139725/ http://blog.csdn.net/enter89/article/details/51205752
文章内容转自：http://blog.163.com/pei_jia123/blog/static/230990078201711003348615/