跨域问题

1、跨域是什么？

1）广义的跨域：指一个域下的文档或脚本试图去请求另一个域下的资源。

    a)资源跳转： 链接、重定向、表单提交

    b)资源嵌入：link,script,img等带src属性的标签等

    c)脚本请求： js发起的ajax请求、dom和js对象的跨域操作等

2）我们通常所说的跨域是狭义的，是由浏览器同源策略限制的。

    a、同源策略/SOP（Same origin policy）：同源是指“协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。（这是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓)

    b、同源策略限制以下几种行为：

        1.) Cookie、LocalStorage 和 IndexDB 无法读取

        2.) DOM 和 Js对象无法获得

        3.) AJAX 请求不能发送

    c、常见跨域场景

2、跨域解决方案

1）通过JSONP跨域

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式，而JSONP（JSON with Padding）则是JSON 的一种“使用模式”，通过这种模式可以实现数据的跨域获取。 

JSONP跨域的原理：在同源策略下，在某个服务器下的页面是无法获取到该服务器以外的数据的，但img、iframe、script等标签是个例外，这些标签可以通过src属性请求到其他服务器上的数据。利用script标签的开放策略，我们可以实现跨域请求数据，当然，也需要服务端的配合。当我们正常地请求一个JSON数据的时候，服务端返回的是一串JSON类型的数据，而我们使用JSONP模式来请求数据的时候，服务端返回的是一段可执行的JavaScript代码。

在jQuery中如何通过JSONP来跨域获取数据

    a）在ajax函数中设置dataType为 'jsonp' ： 

    b、利用getJSON来实现，只要在地址中加上callback=?参数即可： 

2）document.domain + iframe跨域

3） location.hash + iframe

4） window.name + iframe跨域

5） postMessage跨域

6） 跨域资源共享（CORS）

7） nginx代理跨域

8） node.js中间件代理跨域

9） WebSocket协议跨域

---

参考：前端常见跨域解决方案（全） - inroam - 博客园