再也不学AJAX了！（三）跨域获取资源 ② - JSONP & CORS

摘要：浏览器的同源策略固然保障了互联网世界的数据隐私与数据安全，但是如果当我们需要使用跨域请求资源时，同源策略又会成为开发者的阻碍。我们之前提到过，如果想要绕过浏览器同源策略，实现使用技术跨域获取资源，需要服务端和客户端的协同合作。

浏览器的“同源策略”固然保障了互联网世界的数据隐私与数据安全，但是如果当我们需要使用AJAX跨域请求资源时，“同源策略”又会成为开发者的阻碍。在本文中，我们会简单介绍需要跨域请求资源的两种情景，然后，详细解释目前主流的四种跨域请求资源方案。

让我们开始吧！

试想，当我们拥有多个站点，并且这些站点又经常共享相同的数据，那么为每个站点存储一份数据看起来就蠢透了。更好的方案是，我们建设一台静态资源存储服务器，然后让我们的所有站点都从这一台服务器上获取资源。很理想的方案，但是现实中，我们首要解决的问题便是浏览器的“同源策略”，别忘了，不同域之间无法通过AJAX技术获取资源。这是需要跨域获取资源的主要情景。

另外，站在互联网“开放，平等，自由”精神的角度上讲，如果所有人的数据都被设置为只有同域才能访问，那么互联网世界未免也太无聊了，如果我就是想要与更多的人分享我的数据，难道不应该有办法让我做到这一点吗？

当然有办法，下面我们就将一一解释当下主流的跨域请求资源方式。

我们将主要介绍以下四种跨域请求资源的方案，并逐一解释他们的原理，实用方式以及优缺点，希望你和我一样有耐心，耐心总是能带来回报：

野路子出身却好用的方式：JSONP；

官方推荐的跨域资源共享方案：CORS；

使用HTML5 API：postMessage；

抛弃HTTP，使用：Web Sockets；

在开始下面的内容之前，我们首先需要强调一点，无论是怎样的跨域资源获取方案，本质上都需要服务器端的支持。跨域获取资源之所以能够成功，本质是服务器默许了你有权限获取相应资源。下面我们所运用的种种方式，实际上是客户端和服务端互相配合，绕过同源策略进行数据交互的工作，千万不要误以为掌握了下述技术后，我们就能成为一个黑客 ??‍♂️。

正如标题所描述的那样，JSONP技术是早期某个(些?)聪明的程序员发明的跨域资源获取方式，由于该技术的简单易用，逐渐变得越来越流行，最终成为经典的跨域获取资源方案。

JSONP是“JSON with padding”的简写，我将其翻译为“被包裹的JSON”，当你看完这个章节，你一定会觉得这个名字相当贴切。

让我们模拟一下当初想到JSONP技术的高手程序员是如何推理的：

首先，我们应该清楚的认识到，浏览器的“同源策略”只是阻止了通过AJAX技术跨域获取资源，而并没有禁止跨域获取资源这件事本身，正因如此，我们可以通过标签，标签以及

这意味着什么呢？这意味着被加载的文件与HTML文件下的其他JS文件共享一个全局作用域。也就是说，标签加载到的资源是可以被全局作用域下的函数所使用的！