小解跨域问题

好了，以前自己对跨域、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.domain、window.name、window.postMessage(message, targetOrigin)，还没有用过，以后用到了在更新好了……

参考链接：

HTTP访问控制(CORS) - MDN

详解js跨域问题

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