1.背景介绍

什么是跨域？

跨源资源共享（CORS）是一种机制，它使用额外的HTTP标头让用户代理获得访问来自不同来源（域） 的服务器上的选定资源的权限，而不是使用当前正在使用的站点。用户代理在请求来自与当前文档不同的域， 协议或端口的资源时，会发出跨源HTTP请求。

跨源请求的示例：http://domain-a.com提供的HTML页面 src请求http://domain-b.com/image.jpg。 网络上的许多页面今天加载资源，如来自不同域（如内容交付网络（CDN））的CSS样式表，图像和脚本。

出于安全原因，浏览器限制从脚本内发起的跨源HTTP请求。例如，XMLHttpRequest与提取API遵循同源策略。 这意味着使用这些API的Web应用程序只能从加载应用程序的同一个域请求HTTP资源，除非使用CORS头文件。

2.知识剖析

产生的原因？

浏览器为了安全问题一般都限制了跨域访问，也就是不允许跨域请求资源

同ip（或domain）,同端口，同协议视为同一个域，一个域内的脚本仅仅具有本域内的权限，可以理解为本域脚本只能读写 本域内的资源，而无法访问其它域的资源。这种安全限制称为同源策略

现代浏览器在安全性和可用性之间选择了一个平衡点。 在遵循同源策略的基础上，选择性地为同源策略“开放了后门”。例如img script style等标签，都允许垮域引用资源,然而， 你也只能是引用这些资源而已，并不能读取这些资源的内容

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

1.Cookie、LocalStorage 和 IndexDB 无法读取

2.DOM 和 Js对象无法获得

3.AJAX 请求不能发送

常见跨域场景

3.常见问题

跨域解决方案

1、 通过jsonp跨域
2、 document.domain + iframe跨域
3、 location.hash + iframe
4、 window.name + iframe跨域
5、 postMessage跨域
6、 跨域资源共享（CORS）
7、 nginx代理跨域
8、 nodejs中间件代理跨域
9、 WebSocket协议跨域

4.解决方案

nginx反向代理解决跨域

正向代理：代理位于网站和客户端中间， 客户端无法访问某网站，就将请求发送给代理服务器，代理从网站取回来再发送给客户端，网站并不知道为谁提供服务

反向代理：客户端访问某网站的一个页面， 但是网站并没有，就偷偷从另外一台服务器上取回来,然后作为自己的内容吐给用户，用户不知道真正提供服务的是谁

对于浏览器来说，访问的就是同源服务器上的一个url。而nginx通过 检测url前缀，把http请求转发到后面真实的物理服务器。并通过rewrite命令把前缀再去掉。这样真实的服务器就可以正确 处理请求，并且并不知道这个请求是来自代理服务器的。

简单说，nginx服务器欺骗了浏览器，让它认为这是同源调用，从而解决了浏览器的跨域问题。又通过重写url，欺骗了真实 的服务器，让它以为这个http请求是直接来自与用户浏览器的。

7.参考文献

参考一： 跨域问题解决方案（Nginx）的配置文件地址

参考二： 最简单实现跨域的方法----使用nginx反向代理

8.更多讨论

如何通过jsonp跨域