【附录一】跨域解决方案及其原理

一、为什么要跨域

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

二、常见的跨域场景(不允许通信)

1. 不同协议，同一域名：http://www.domain.com/a.js 和 https://www.domain.com/b.js

2. 同一域名，不同端口：http://www.domain.com:8000/a.js 和 http://www.domain.com/b.js

3. 不同域名：http://www.domain1.com/a.js 和 http://www.domain2.com/b.js

4. 主域相同，子域不同：http://www.domain.com/a.js 和 http://x.domain.com/b.js 和 http://domain.com/c.js

5. 域名和域名对应相同IP：http://www.domain.com/a.js 和 http://192.168.4.12/b.js

三、跨域解决方案

1. 通过 jsonp 跨域

2. document.domain + iframe 跨域：仅限主域相同，子域不同的跨域场景。

3. location.hash + iframe 跨域：a欲与b跨域相互通信，通过中间页c来实现。

4. window.name + iframe 跨域

5. postMessage 跨域

6. 跨域资源共享（CORS）：只需要服务端设置Access-Control-Allow-Origin即可。

7. nginx 代理跨域

8. nodejs 中间件代理跨域

9. WebSocket 协议跨域

四、跨域解决方案的原理

1. JSONP跨域

此方法需要后台支持，和后台交互一般用 JSONP。

实现原理：

通常为了减轻 web 服务器的负载，我们把 JS、CSS、img 等静态资源分离到另一台独立域名的服务器上，在 html 页面中再通过相应的标签从不同域名下加载静态资源，而被浏览器允许。

基于此原理，我们可以通过动态创建 <script> 标签，再请求一个带参网址实现跨域通信。

JSONP是通过动态<script>元素来使用的，使用时可以为 src 属性指定一个跨域 URL。这里的 <script> 元素与 <img> 元素类似，都有能力不受限制地从其他域加载资源。因为 JSONP 是有效的 JS 代码，所以在请求完成后，即在 JSONP 响应加载到页面中以后，就会立即执行。

具体实现：

1) 原生实现

服务端返回如下（返回时即执行全局函数）：

2) jquery ajax

3) vue.js

后端node.js代码示例

<