您的位置:永利集团登录网址 > 永利集团登录网址 > ajax跨域问题

ajax跨域问题

2019-11-23 01:36

项目流程:测试环境(assets.daily.taobao.net)-> 预发布环境(a.tbcdn.cn)切域名后需要手工修改 JS 中写死的文件路径。

(一):动态脚本注入的方法.即在页面中动态生成<script>脚本标签,另其src指向其它域的js文件(即是src属性为不同域的URL). (一般用于不同域之间的跨域) 

源生:

//判断当前域是日常还是线上环境
if (location.host.indexOf('tbcdn.cn') !== -1) {
var baseUrl = '';
} else {
var baseUrl = '';
}

      var scriptElement = document.createElement('script');

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style></style>
    <script>

        window.onload = function(){
            var oBtn = document.getElementById('btn1');
            oBtn.onclick = function(){

                var oAjax = new XMLHttpRequest();
                oAjax.open('GET','a.txt',true);
                oAjax.send();
                oAjax.onreadystatechange = function(){
                    if(oAjax.readyState == 4){
                        //请求完成
                        if(oAjax.status >= 200 && oAjax.status<300 || oAjax.status == 304){
                            alert(oAjax.responseText);
                        }
                    }
                }
            };
        };


    </script>
</head>
<body>
<input type="button" value="发个请求" id="btn1">
<div style="width: 200px;height: 200px;background: red"></div>
</body>
</html>

本文来源:芒果小站

      scriptElement.src = 'URL';

jquery

预发布环境(a.tbcdn.cn)切域名后需要手工修改 JS 中写死的文件路径。 //判断当前域是日常还是...

      document.getElementsByTagName('head')[0].appendChild(scriptElement);

ajax:
    $.ajax({
        url:
        dataType:
        cache:
        success:
        error:
    });

     通过动态创建script标签就可以加载其它域的js文件,然后通过本页面就可以调用加载后js文件的函数,这样做的缺陷就是不能加载其它域的文档

还有几个比较常用的参数:
async 是否异步(默认是true)
如果需要同步请求: false
contentType
请求内容的类型,一般用于post请求
data:
get:$.ajax({
url:'1.php?a=1&b=2'
});
post:$.ajax({
url:'1.php',
data:{
a:1,
b:2
}
})
type: 默认 GET
$.ajax({
url:'1.php?content='+oT.value ×
url:'1.php',
data:{
content:oT.value
}
type:'POST'
});
一个简单请求:
$.ajax({
永利游戏平台 ,url:'a.txt',
success:r=>{
alert(r);
}
});

     script标签的 src属性不一定必须是一个存在的js文件,也可以是一个http handler的url,只要这个http handler返回的是一个text/JavaScript类型的响应就可以了

请求的地址:
a.txt
—— 相对路径,必须从当前文件位置开始
http://localhost/20170220K3/0224/a.txt
—— 绝对路径,在任何位置都可以用这个地址来访问
请求一个别的网站地址:

    例:

url:
    http://demo.zhinengshe.com/strive/data.php
错误:
    1 XMLHttpRequest cannot load http://demo.zhinengshe.com/strive/data.php. The 'Access-Control-Allow-Origin' header has a value 'http://localhost:8080' that is not equal to the supplied origin. Origin 'http://localhost' is therefore not allowed access.
<script type="text/javascript">  
        var script = document.createElement("script");  
        function ajaxCross(){  
            script.type = "text/javascript";  
            script.src = "http://xipang.hfutonline.net/public/test";  
        }  
        window.onload = function(){  
            ajaxCross();  
            document.getElementsByTagName("head")[0].appendChild(script);  
        }  
        function getAnswer(){  
            console.log(date);  
        }  
        script.onload = function() {  
                getAnswer();  
        }
</script>

“Access-Control-Allow-Origin”—— 跨域

 

域: 域名
baidu.com sina.com.cn localhost
Ajax 请求,如果域名不一致,就会发生跨域现象,报错。

通过请求服务器端返回的数据是var date = {}的形式;

www.sina.com.cn 
sports.sina.com.cn
news.sina.com.cn
leju.com
    ——不同的域名,这些域名这间如果想做ajax数据交互

 

跨域:
解决跨域取数据的解决
从一个域名来获取另外一个域名的数据

      缺点:

JSONP:
jsonp != json + padding

      不能设置请求头信息;

原理:
函数定义
函数调用

      参数传递也只能使用GET方式;

在自己的页面定义show函数:
function show(json){
//可以通过json的参数来访问 zhinengshe.com/test.js 里的数据了
}
——————以上,就实现了跨域请求数据

      不能设置请求的超时处理或重试,就算失败了也不一定知道;

以前: ajax的接口
现在: 新的接口形式—— JSONP 接口

      必须等数据都已经返回才能访问他们,而且不能访问请求头信息,也不能把整个响应消息当作字符串来处理;

百度接口:http://suggestion.baidu.com/su?wd=js&cb=show
关键参数说明:
wd: 表示的是搜索的关键词
cb: 一般表示 callback(回调)
cb=show
cb:用于指定回调函数的名字 (默认情况,大多数JSONP接口都使用 callback——默认值)
cb=?:这里的问号 ? —— 就是回调函数的名字

      还有一点就是响应消息作为脚本标签的源码,必须是可执行的javascript代码,不能使用其它任何格式的数据

JSONP的接口,是可以指定返回值的回调函数名字的。

      function jsonCallback(jsonString){                //jsonCallback进行数据封装

实现百度效果:
script标签: 比较特殊的标签 —— 一次性标签
只加载一次,修改src属性并不能触发标签的重新加载
JSONP原理:
动态创建script标签,通过回调函数来获取其它域名下的数据。

            var  data  =  eval('(' +jsonString +')')

原生JS实现JSONP,为了了解原理。
jquery的JSONP:
JSONP中最重要的 : 接口中的 “cb=show”
cb: 默认 callback

            //数据处理

$.ajax({
    url:请求的地址
    dataType: 'jsonp' //json
    jsonp: 'cb'//在一个 jsonp 请求中重写回调函数的名字
    jsonpCallback: //对应的以上例子中的   show
            //默认情况下,jquery会产生一个随机的函数名
            //如果说接口中已经确定了回调函数名,那么在使用的时候,就需要用 jsonpCallback参数来指定 回调函数的名字
    success:function(r){
        //r 
    }

});

      }

AJAX的原生写法,原理:
1、创建一个XMLHttpRequest 对象: 用于发请求
var oAjax = new XMLHttpRequest();
IE6 不支持 XMLHttpRequest 对象
new ActiveXObject('Microsoft.XMLHTTP');

       优点:因为响应消息作为js执行,所以速度非常快

2、指定请求的方式,同时创建并且打开链接
    oAjax.open('GET','',true);
    参数:
        请求方式: GET   POST
        请求地址:URL
        是否异步:默认true,  false-同步
3、发送
    oAjax.send();
4、监控状态、根据状态码确定是否完成,确定是否成功,得到请求结果
    oAjax.onreadystatechange = function(){
            if(oAjax.readyState == 4){
            //请求完成
            if(oAjax.status >= 200 && oAjax.status<300 || oAjax.status == 304){
                alert(oAjax.responseText);
            }
            }

    //oAjax.status   —— http 状态码
    oAjax.readyState    通信状态,只读的,不能修改(赋值)
    0   UNSEND  ajax对象已经准备完毕,但是还没有打开连接
    1   OPENDED 已经打开连接(建立好连接)
    2   HEADERS-RECEVICED   发送请求完毕,头部信息也接收完毕了
    3   LOADING 下载内容(接收内容)
    4   DONE        操作完毕

 

用服务器端的XmlHttpRequest代理实现跨域访问

我们不能在浏览器端直接使用AJAX来跨域访问资源,但是在服务器端是没有这种跨域安全限制的。所以,我们只需要让服务器端帮我们完成“跨域访问”的工作,然后在浏览器端用AJAX获取服务器端“跨域访问”的结果就可以了。这就是所谓的在服务器端创建一个XmlHttpRequest代理,通过这个代理来访问其他域名下的资源。将后台作为代理,每次对其它域的请求转交给本域的后台,本域的后台通过模拟http请求去访问其它域,再将返回的结果返回给前台,这样做的好处是,无论访问的是文档,还是js文件都可以实现跨域。

 

页面上javascript脚本:

 

<script type="text/javascript"><!--   
Var sUrl="http://Jipiao.taobao.com/proxy.do"; //本域下代理地址   
var callback =   
{   
success: function(res) { alert(res.responseText); },   
failure: function(res) { alert('failure');},   
argument:{}   
}   
YAHOO.util.Connect.asyncRequest('GET', sUrl, callback, null);   
// --></script>  

 

完成域A服务端的Proxy程序(这里假定是一个servlet),伪码如下:

Public class Proxy extends …….{   
..doGet(……..){   
HttpClient client=……;   
GetMethod get=new GetMethod("www.baidu.com/xxxxx.do");//访问域B的链接   
int statusCode = client.executeMethod(get);   
if (statusCode != HttpStatus.SC_OK) {   
byte[] responseBody = get.getResponseBody();   
String res=new String(responseBody);   
Httpresponse.getWriter().write(res);//将数据返回给域A   
}   
}   
}   

 

基于iframe实现跨域(一般用于父域子域之间的跨域)

 

基于iframe实现的跨域要求两个域具有aa.xx.com,bb.xx.com这种特点,也就是两个页面必须属于一个基础域(例如都是xxx.com,或是xxx.com.cn),使用同一协议(例如都是 http)和同一端口(例如都是80),这样在两个页面中同时添加document.domain,就可以实现父页面调用子页面的函数

页面一:

 

<html>    
<head>    
  <script>    
   document.domain = "xx.com";    
    function aa(){    
      alert("p");    
   }    
  </script>    
</head>    
<body>    
   <iframe src="http://localhost:8080/CmsUI/2.html" id="i">    

   </iframe>    
   <script>    
  document.getElementById('i').onload = function(){    
     var d = document.getElementById('i').contentWindow;    
     d.a();    

 };    
   </script>    
 </body>    
</html>    

 

 

页面二:

 

<html>    
 <head>    
  <script>    
    document.domain = "xx.com";    
    function a(){    
    alert("c");    
     }    
  </script>    
 </head>    
 <body>    
 </body>    
</html>   

 

 

也可以用iframe实现不同域之间的跨域,不过比较麻烦

当两个域不同时,如果想相互调用,那么同样需要两个域都是由你来开发才可以。用iframe可以实现数据的互相调用。解决方案就是用window.location对象的hash属性。hash属性就是 里面的#dshakjdhsjka。利用JS改变hash值网页不会刷新,可以这样实现通过JS访问hash值来做到通信。不过除了IE之外其他大部分浏览器只要改变hash就会记录历史,你在前进和后退时就需要处理,非常麻烦。不过再做简单的处理时还是可以用的。大体的过程是页面a和页面b在不同域下,b通过iframe添加到a里,a通过JS修改iframe的hash值,b里面做一个监听(因为JS只能修改hash,数据是否改变只能由b自己来判断),检测到b的hash值被修改了,得到修改的值,经过处理返回a需要的值,再来修改a的hash值(这个地方要注意,如果a 本身是那种查询页面的话比如

 

      (二):“Firefox 3”中跨域XHR,是基于W3C跨站点请求。通过设置Access-Control-Allow-Origin头部(自定义的HTTP头部),远程资源有权决定自身是否可以被远程浏览器访问.实现方法如下

      Access-Control-Allow-Origin:

      Access-Control-Allow-Origin:*表明可以允许所有请求访问当前资源

      Origin头部包含请求页面的头部(协议,域名,端口),如果服务器确定请求被通过,会发送一个 Access-Control-Allow-Origin头部作为响应发送请求的同一个源,若为一个公共资源则返回 Access-Control-Allow-Origin:*

     请求另一个域的资源:使用标准的XHR对象,并为open()方法传入一个绝对URL

     var xhr = new XMLHttpRequest();

     xhr.onreadystatechange = funtion(){

           if(xhr.readyState == 4){

                 ......

           }

    };

    xhr.open('get',' -else.com/page',true);

    xhr.send(null);

      缺点:

     不能使用setRequestHeader()设置自定义头部

     不会发送也不会接收cookie

     getAllResponseHeaders()方法只能返回空字符串

     优点:跨域的XHR对象允许访问statues和statusText属性

     (三):IE8中的XDomainRequest对象实现跨域

     XDR对象使用方法与XHR的类似,首先创建一个XDomainRequest的实例,调用open(),再调用send(),但open()只接受两个参数,即请求的类型和URL,请求返回之后会触发load事件,响应的数据会保存在responseText中,响应失败就会触发error事件,可以调用abort()来终止请求,例:

     var xdr = new XDomainRequest();

     xdr.onload = function(){alert(xdr.responseText);

     xdr.onerror = function(){alert("an error occured.")}

     xdr.timeout = 1000;  //1秒过后会触发timeout事件

     xdr.ontimeout = function(){alert("request took too long")}

 

 xdr.open("get","");     

 

 xdr.send(null);

注:

被请求的资源可以根据它认为合适的任意数据(用户代理,来源页面)来决定是否设置Access-Control-Allow-Origin头部

cookie不会随请求发送,也不会随响应返回

只能设置请求头部信息中的Content-Type字段

不能访问响应头部信息

只支持GET和POST请求

只能访问Access-Control-Allow-Origin头部字段设置为*的资源

所有请求都是异步的,不能创建同步请求

接受响应之后,只能访问响应的原始文本,没办法确定响应的状态码

本文由永利集团登录网址发布于永利集团登录网址,转载请注明出处:ajax跨域问题

关键词:

  • 上一篇:没有了
  • 下一篇:没有了