首页 > 代码库 > jquery中ajax跨域设置http header
jquery中ajax跨域设置http header
一.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 = http://www.mamicode.com/$_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
jquery中ajax跨域设置http header