Ajax的跨域问题

Posted wzp-monkey

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Ajax的跨域问题相关的知识,希望对你有一定的参考价值。

跨域问题来源于浏览器的同源策略(用于隔离潜在恶意文件),即只有 协议+主机名+端口号 (如存在)相同,则允许相互访问。也就是说javascript只能访问和操作自己域下的资源,不能访问和操作其他域下的资源。跨域问题是针对JS和ajax的,html本身没有跨域问题,比如a标签、script标签、甚至form标签(可以直接跨域发送数据并接收数据)等 。

处理跨域的方法

一、JSONP

实现原理

JSONP之所以能够用来解决跨域方案,主要是因为 <script> 脚本拥有跨域能力,而JSONP正是利用这一点来实现:利用js构造一个script标签,把json的url赋给script的scr属性,把这个script插入到dom里,让浏览器去获取。具体原理如图:

技术图片

实现流程

JSONP的实现步骤大致如下(参考了来源中的文章)

  • 客户端网页网页通过添加一个<script>元素,向服务器请求JSON数据,这种做法不受同源政策限制

    function addScriptTag(src) {
      var script = document.createElement(‘script‘);
      script.setAttribute("type","text/javascript");
      script.src = src;
      document.body.appendChild(script);
    }
    
    window.onload = function () {
      addScriptTag(‘http://example.com/ip?callback=foo‘);
    }
    
    function foo(data) {
      console.log(‘response data: ‘ + JSON.stringify(data));
    };                      
        

    请求时,接口地址是作为构建出的脚本标签的src的,这样,当脚本标签构建出来时,最终的src是接口返回的内容

  • 服务端对应的接口在返回参数外面添加函数包裹层
foo({
  "test": "testData"
});                     
  • 由于<script>元素请求的脚本,直接作为代码运行。这时,只要浏览器定义了foo函数,该函数就会立即调用。作为参数的JSON数据被视为JavaScript对象,而不是字符串,因此避免了使用JSON.parse的步骤。

注意,一般的JSONP接口和普通接口返回数据是有区别的,所以接口如果要做JSONO兼容,需要进行判断是否有对应callback关键字参数,如果有则是JSONP请求,返回JSONP数据,否则返回普通数据

使用注意

基于JSONP的实现原理,所以JSONP只能是“GET”请求,不能进行较为复杂的POST和其它请求,所以遇到那种情况,就得参考下面的CORS解决跨域了(所以如今它也基本被淘汰了)

二、CORS

 

CORS请求原理

 

CORS是一个W3C标准,全称是”跨域资源共享”(Cross-origin resource sharing)。它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制。

 

基本上目前所有的浏览器都实现了CORS标准,其实目前几乎所有的浏览器ajax请求都是基于CORS机制的,只不过可能平时前端开发人员并不关心而已(所以说其实现在CORS解决方案主要是考虑后台该如何实现的问题)。

 

关于CORS,强烈推荐阅读跨域资源共享 CORS 详解(阮一峰)

 

另外,这里也整理了一个实现原理图(简化版):

 

技术图片

 

如何判断是否是简单请求?

 

浏览器将CORS请求分成两类:简单请求(simple request)和非简单请求(not-so-simple request)。只要同时满足以下两大条件,就属于简单请求。

 

  • 请求方法是以下三种方法之一:HEAD,GET,POST

  • HTTP的头信息不超出以下几种字段:

    • Accept

    • Accept-Language

    • Content-Language

    • Last-Event-ID

    • Content-Type(只限于三个值application/x-www-form-urlencoded、 multipart/form-data、text/plain)

 

凡是不同时满足上面两个条件,就属于非简单请求。

区别:

CORS与JSONP的使用目的相同,但是比JSONP更强大。

JSONP只支持GET请求,CORS支持所有类型的HTTP请求。JSONP的优势在于支持老式浏览器,以及可以向不支持CORS的网站请求数据。

三、PostMessage

postMessage(data,origin)方法接受两个参数

 1.data:要传递的数据,html5规范中提到该参数可以是JavaScript的任意基本类型或可复制的对象,然而并不是所有浏览器都做到了这点儿,部分浏览器只能处理字符串参数,所以我们在传递参数的时候需要使用JSON.stringify()方法对对象参数序列化,在低版本IE中引用json2.js可以实现类似效果。

2.origin:字符串参数,指明目标窗口的源,协议+主机+端口号[+URL],URL会被忽略,所以可以不写,这个参数是为了安全考虑,postMessage()方法只会将message传递给指定窗口,当然如果愿意也可以建参数设置为"*",这样可以传递给任意窗口,如果要指定和当前窗口同源的话设置为"/"。

http://test.com/index.html

技术图片
<div style="width:200px; float:left; margin-right:200px;border:solid 1px #333;">
        <div id="color">Frame Color</div>
    </div>
    <div>
        <iframe id="child" src="http://lsLib.com/lsLib.html"></iframe>
    </div>
技术图片

 

我们可以在http://test.com/index.html通过postMessage()方法向跨域的iframe页面http://lsLib.com/lsLib.html传递消息

window.onload=function(){
            window.frames[0].postMessage(‘getcolor‘,‘http://lslib.com‘);
        }

接收消息

test.com上面的页面向lslib.com发送了消息,那么在lslib.com页面上如何接收消息呢,监听window的message事件就可以

http://lslib.com/lslib.html

window.addEventListener(‘message‘,function(e){
                if(e.source!=window.parent) return;
                var color=container.style.backgroundColor;
                window.parent.postMessage(color,‘*‘);
            },false);

 

这样我们就可以接收任何窗口传递来的消息了,为了安全起见,我们利用这时候的MessageEvent对象判断了一下消息源,MessageEvent是一个这样的东东

技术图片

有几个重要属性

  1. data:顾名思义,是传递来的message
  2. source:发送消息的窗口对象
  3. origin:发送消息窗口的源(协议+主机+端口号)

这样就可以接收跨域的消息了,我们还可以发送消息回去,方法类似

简单的demo

在这个例子中,左边的div会根据右边iframe内div颜色变化而变化

技术图片   技术图片

技术图片http://test.com/index.html
技术图片http://lslib.com/lslib.html

 

在例子中页面加载的时候主页面向iframe发送’getColor‘ 请求(参数没实际用处)

window.onload=function(){
            window.frames[0].postMessage(‘getcolor‘,‘http://lslib.com‘);
        }

 

iframe接收消息,并把当前颜色发送给主页面呢

window.addEventListener(‘message‘,function(e){
                if(e.source!=window.parent) return;
                var color=container.style.backgroundColor;
                window.parent.postMessage(color,‘*‘);
            },false);

 

主页面接收消息,更改自己div颜色

window.addEventListener(‘message‘,function(e){
            var color=e.data;
            document.getElementById(‘color‘).style.backgroundColor=color;
        },false);

 

当点击iframe事触发其变色方法,把最新颜色发送给主页面

技术图片
function changeColor () {            
                var color=container.style.backgroundColor;
                if(color==‘rgb(204, 102, 0)‘){
                    color=‘rgb(204, 204, 0)‘;
                }else{
                    color=‘rgb(204,102,0)‘;
                }
                container.style.backgroundColor=color;
                window.parent.postMessage(color,‘*‘);
            }
技术图片

 

主页面还是利用刚才监听message事件的程序处理自身变色

window.addEventListener(‘message‘,function(e){
            var color=e.data;
            document.getElementById(‘color‘).style.backgroundColor=color;
        },false);

以上是关于Ajax的跨域问题的主要内容,如果未能解决你的问题,请参考以下文章

chrome中的跨域ajax POST

Ajax的跨域问题

Ajax的跨域问题

关于AJAX的跨域问题

PHP解决mui中ajax的跨域问题

使用ajax请求遇到的跨域问题