jquery中ajax跨域设置http header

Posted 2020-08-14

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

$.ajax({ 
    type: "post", 
    url:"http://abc.cc/qrcode3/index.php/home/index/testpost", 
    dataType: "json"
    data: {"value":"{$encodeString}"}, 
    // headers : {‘Authorization‘:‘Base bmVvd2F5Om4lb3dheQ==‘}, 
    beforeSend: function(xhr) {
        xhr.setRequestHeader("Authorization", "Base bmVvd2F5Om4lb3dheQ==");
    }, 
    success: function(data){ alert(data); }, 
    error: function(data){ alert("error"); } ,
});

设置header头部有两种方法：
1.headers : {‘Authorization’:’Base bmVvd2F5Om4lb3dheQ==’}
2.定义beforeSend方法
beforeSend: function(xhr) {
xhr.setRequestHeader(“Authorization”, “Base bmVvd2F5Om4lb3dheQ==”);
}
二.ajax跨域请求（没有设置http header）

$.ajax({ 
    type: "post", 
    url:"http://abc.cc/qrcode3/index.php/home/index/testpost", 
    dataType: "jsonp"
    data: {"value":"{$encodeString}"}, 
    // headers : {‘Authorization‘:‘Base bmVvd2F5Om4lb3dheQ==‘}, 
    
    success: function(data){ alert(data); }, 
    error: function(data){ alert("error"); } ,
});
服务器端代码：
public function testpost() {
    $data = $_GET[‘str‘]?$_GET[‘str‘]:"123456";
    $callback = $_GET[‘callback‘];
    if(!preg_match("/^[0-9a-zA-Z_.]+$/",$callback))
    {
	exit(‘参数错误！‘);
    }
    echo $callback.‘(‘.json_encode($data).‘)‘;
    exit;
}

无法设置header

三.ajax跨域请求，并设置header头部

jquery实现代码如下：
$(".get_data").click(function() {
    var key = $("#user").val() + ":" + $("#pass").val();
    //base64编码
    var authKey = base64encode(key);
    console.log(authKey);
    $.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);
            $(".text-danger").text(data.msg);
        },
        error:function(data){
            alert("error");
        }
    });
});

php实现代码如下：
public function testajax() {		
    // 指定允许其他域名访问  
    header(‘Access-Control-Allow-Origin:http://abc.cn‘);  
    // 响应类型  
    header(‘Access-Control-Allow-Methods:POST,GET‘);  
    // 响应头设置  
    header(‘Access-Control-Allow-Headers:Authorization,lpy‘); 

    $header = apache_request_headers();
    $data[‘header‘] = $header[‘lpy‘];
    $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:Base bmVvd2F5Om4lb3dheQ==",
    ‘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