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请求是直接来自与用户浏览器的。
5.编码实战
nginx配置
location /
{
#root：里面配置了root，表示当匹配这个请求的路径时，将会在这个文件夹内寻找相应的文件，这里对我们之后的静态文件伺服很有用。
root html;
# index：当没有指定主页时，默认会选择这个指定的文件，它可以有多个，并按顺序来加载，如果第一个不存在，则找第二个，依此类推。
index index.html index.htm index.php;
}
# 反向代理
# location：表示匹配的路径，这时配置了/表示所有请求都被匹配到这里
location /carrots-admin-ajax/
{
proxy_pass http://dev.admin.carrots.ptteng.com/;
}
6.扩展思考
nginx还可以用来做什么？
7.参考文献
参考二： 最简单实现跨域的方法----使用nginx反向代理
8.更多讨论
如何通过JSONP跨域
1.ajax请求怎么用jq写
$.ajax({
type: "post",
dataType: "html",
url: '/Resources/GetList.ashx',
data: dataurl,
success: function (data) {
if(data !="") {
$("#pager").pager({ pagenumber: pagenumber, pagecount: data.split("$$")[1], buttonClickCallback: PageClick });
$("#anhtml").html(data.split("$$")[0]);
}
}
});
2、反向代理什么时候使用？
1）作内容服务器的替身
如果您的内容服务器具有必须保持安全的敏感信息，如信用卡号数据库，可在防火墙外部设置一个代理服务器作为内容服务器的替身。当外部客户机尝试访问内容服务器时，会将其送到代理服务器。实际内容位于内容服务器上，在防火墙内部受到安全保护。代理服务器位于防火墙外部，在客户机看来就像是内容服务器。
当客户机向站点提出请求时，请求将转到代理服务器。然后，代理服务器通过防火墙中的特定通路，将客户机的请求发送到内容服务器。内容服务器再通过该通道将结果回传给代理服务器。代理服务器将检索到的信息发送给客户机，好像代理服务器就是实际的内容服务器（参见图 2）。如果内容服务器返回错误消息，代理服务器会先行截取该消息并更改标头中列出的任何 URL，然后再将消息发送给客户机。如此可防止外部客户机获取内部内容服务器的重定向 URL。
这样，代理服务器就在安全数据库和可能的恶意攻击之间提供了又一道屏障。与有权访问整个数据库的情况相对比，就算是侥幸攻击成功，作恶者充其量也仅限于访问单个事务中所涉及的信息。未经授权的用户无法访问到真正的内容服务器，因为防火墙通路只允许代理服务器有权进行访问。
2）作为内容服务器的负载均衡器
可以在一个组织内使用多个代理服务器来平衡各 Web 服务器间的网络负载。在此模型中，可以利用代理服务器的高速缓存特性，创建一个用于负载平衡的服务器池。此时，代理服务器可以位于防火墙的任意一侧。如果 Web 服务器每天都会接收大量的请求，则可以使用代理服务器分担 Web 服务器的负载并提高网络访问效率。
对于客户机发往真正服务器的请求，代理服务器起着中间调停者的作用。代理服务器会将所请求的文档存入高速缓存。如果有不止一个代理服务器，DNS 可以采用“循环复用法”选择其 IP 地址，随机地为请求选择路由。客户机每次都使用同一个 URL，但请求所采取的路由每次都可能经过不同的代理服务器。
可以使用多个代理服务器来处理对一个高用量内容服务器的请求，这样做的好处是内容服务器可以处理更高的负载，并且比其独自工作时更有效率。在初始启动期间，代理服务器首次从内容服务器检索文档，此后，对内容服务器的请求数会大大下降。
3）JSONP怎么跨域？
用js动态创建一script标签 地址指向你所请求的地址
var oBtn = document.getElementById('btn');
oBtn.onclick = function(){
var script = document.createElement("script"); //创建标签
script.src = "https://api.douban.com/v2/book/search?q=javascript&count=1&callback=handleResponse"; //请求地址get方式
document.body.insertBefore(script, document.body.firstChild);
};
