小解跨域问题

好了,以前自己对跨域、jsonp的理解不太正确,写一篇文章纠正一下……

说起跨域,我们就得说到同源策略问题,简单的来说,同源策略是限制不同源(简单理解为网站吧)之间交互的一个策略,可以有效的增加安全性。

但是也不全然是好的,还有一些时候,我们依旧需要调用外部的api啊,如果禁止外部源的交互的话,我们很显然就没有办法了。

解决的方法有挺多种,这里主要就讲两种,CORS和jsonp。

jsonp

在过去我对jsonp的理解其实不对,或者说不够深刻,这次被指出错误了之后我就只能来检讨然后写这篇了(当然这不重要)。

其实jsonp和ajax完全没有关系,他的主要原理完全不同。只是jQuery把jsonp当成了$.ajax中的一种type,导致有些被误导了。

要说起jsonp的原理,简单的来说,就是以callback的形式去调用执行本地的函数。

从最开始说起,我们调用一个函数,可以使用<script src=""></script>从外部链接。

那么自然的,我们外部链接的文件也可以这么玩:

<script>
    var test = function() {
        alert('hello world');
    }
</script>
// 外部文件
test();

如果我们动态加载文件,就能达到alert的效果了,同理,我们把数据设为callback({...})就能顺利的调用到传入的对象了。

因此,jsonp必须要满足一个函数调用的形式,当然,从中我们也可以看出,jsonp的一个缺点:只能进行get请求

所以很多时候,这个方法不太方便。

CORS

在过去,我以为jsonp是在前端使用的,而CORS在后端配合,构成了跨域。其实他们俩完全是两种独立的方法。

CORS全程Cross-Origin Resource Sharing,跨域资源共享,是个更方便的跨域方法,它有效的解决了Ajax同源限制的问题。

对此,我们需要在接口处后端设置Header:Access-Control-Allow-Origin

它支持多种请求方式,并且不用对api进行特殊化的处理,非常实用,但是对于上古浏览器而言,可能并不支持这种方式。

其他

剩下的方法包括了document.domainwindow.namewindow.postMessage(message, targetOrigin),还没有用过,以后用到了在更新好了……

参考链接:

HTTP访问控制(CORS) - MDN

详解js跨域问题

【原创】说说JSON和JSONP,也许你会豁然开朗,含jQuery用例

植入部分

如果您觉得文章不错,可以通过赞助支持我。

如果您不希望打赏,也可以通过关闭广告屏蔽插件的形式帮助网站运作。

标签: 知识

添加新评论