jQuery AJAX 设置header 跨域 || 不跨域

叁歲伎倆 2022-02-01 23:37 1454阅读 0赞

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

$.ajax({
                type: "post",
                url:"http://xxx",
                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");        
                    }    
                });
            });

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZyZWVkb21WZW5seQ_size_16_color_FFFFFF_t_70]

转载自：[https://www.jianshu.com/p/34af1f99f9d9][https_www.jianshu.com_p_34af1f99f9d9]

更多jQuery ajax 配置可以参考手册： [http://www.w3school.com.cn/jquery/ajax\_ajax.asp][http_www.w3school.com.cn_jquery_ajax_ajax.asp]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZyZWVkb21WZW5seQ_size_16_color_FFFFFF_t_70]: /images/20220202/3918ee5dacc14e519ae420e8e154a55f.png
[https_www.jianshu.com_p_34af1f99f9d9]: https://www.jianshu.com/p/34af1f99f9d9
[http_www.w3school.com.cn_jquery_ajax_ajax.asp]: http://www.w3school.com.cn/jquery/ajax_ajax.asp