美文网首页我爱编程
jquery中ajax跨域设置http header

jquery中ajax跨域设置http header

作者: 宇VS然 | 来源:发表于2018-03-03 11:11 被阅读0次

    今天写api遇到了跨域问题,填坑填了好久...还好有前辈的经验可以借鉴!

    本文从以下几种情况讨论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/

    相关文章

      网友评论

        本文标题:jquery中ajax跨域设置http header

        本文链接:https://www.haomeiwen.com/subject/kcjtfftx.html