前端跨域问题及解决方案(4)

4、AJAX 请求不同源的跨域

4.1、通过 JSONP 跨域

基本原理：网页通过添加一个 <script> 元素，向服务器请求 JSON 数据，这种做法不受同源政策限制；服务器收到请求后，将数据放在一个指定名字的回调函数里传回来。例子如下：
function todo(data){ console.log("The author is: " data.name);}var script = document.createElement("script");script.src = "http://www.jianshu.com/author?callback=todo";//向服务器www.jianshu.com发出请求。注意，该请求的查询字符串有一个callback参数，用来指定回调函数的名字。document.body.appendChild(script);//服务器收到这个请求以后，会将数据放在回调函数的参数位置返回。todo({"name": "fewjq"});//由于<script>元素请求的脚本，直接作为代码运行。
这时，只要浏览器定义了todo函数，该函数就会立即调用。作为参数的JSON数据被视为JavaScript对象。
优点：简单适用，老式浏览器全部支持，服务器改造小。不需要 XMLHttpRequest 或 ActiveX 的支持。缺点：只支持 GET 请求。

4.2、通过 WebSocket 跨域

WebSocket 是一种通信协议，使用 ws://（非加密）和 wss://（加密）作为协议前缀。该协议不实行同源政策，只要服务器支持，就可以通过它进行跨源通信。

4.3、通过 CORS 跨域

当一个资源请求一个其它域名的资源时会发起一个跨域HTTP请求（cross-origin HTTP request）。比如说，域名 A 的某 Web 应用通过<img />标签引入了域名B的某图片资源，域名A的 Web 应用就会导致浏览器发起一个跨域 HTTP 请求。在当今的 Web 开发中，使用跨域 HTTP 请求加载各类资源（包括 CSS、图片、JavaScript 脚本以及其它类资源），已经成为了一种普遍且流行的方式。