分享人：陈占乐
目录
1.背景介绍
2.知识剖析
3.常见问题
4.解决方案
5.编码实战
6.扩展思考
7.参考文献
8.更多讨论
理解跨域首先必须要了解同源策略。同源策略是浏览器上为安全性考虑实施的非常重要的安全策略。
跨域是指一个域下的文档或脚本试图去请求另一个域下的资源，这里跨域是广义的。
广义的跨域：
1.) 资源跳转： A链接、重定向、表单提交
2.) 资源嵌入： link script img frame等dom标签，还有样式中background:url()、@font-face()等文件外链
3.) 脚本请求： js发起的ajax请求、dom和js对象的跨域操作等
同源策略/SOP（Same origin policy）是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。
同源策略限制以下几种行为：
1.) Cookie、LocalStorage 和 IndexDB 无法读取
2.) DOM 和 JS对象无法获得
3.) AJAX 请求不能发送
网页为了获取资源本身有些属性可以跨域请求资源
link script @font-face
img video iframe
网页支持的发送请求的方法
Ajax 表单提交
JSONP 是 JSON with padding（填充式 JSON 或参数式 JSON）的简写，是应用 JSON 的一种新方法。
JSONP 由两部分组成：回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数。回调函数的名字一般是在请求中指定的。而数据就是传入回调函数中的 JSON数据。
function handleResponse(response){
alert("You’re at IP address " + response.ip + ", which is in " +
response.city + ", " + response.region_name);
}
var script = document.createElement("script");
script.src = "http://freegeoip.net/json/?callback=handleResponse";
document.body.insertBefore(script, document.body.firstChild);
通过 XHR 实现 Ajax 通信的一个主要限制，来源于跨域安全策略。默认情况下，XHR 对象只能访 问与包含它的页面位于同一个域中的资源。这种安全策略可以预防某些恶意行为。但是，实现合理的跨 域请求对开发某些浏览器应用程序也是至关重要的。
CORS 背后的基本思想，就是使用自定义的 HTTP 头部 让浏览器与服务器进行沟通，从而决定请求或响应是应该成功，还是应该失败。
这种方法基本思路是发送正常的http请求，利用服务端之间的资源请求不会有跨域限制的特点，后台服务器转发请求到目标服务器请求资源。把跨域的问题交给服务器实现。
Nginx反向代理: 前端发起的请求被Nginx拦截，再由Nginx代由转发请求到资源服务器请求资源。
location / {
proxy_pass http://127.0.0.1:5000;
}
Nginx反向代理如何实现
location ^~/cross_origin/ {
#重写访问路径
rewrite ^~/cross_origin/(.*)$ /$1 break;
proxy_pass http://127.0.0.1:5000;
}
$.ajax({
url:'/cross_origin/get_json?type=20170126',
type:'GET',
dataType:'json',
success:function (data) {
$('#show').val(data.text)
}
})
其他实现跨域的方法还有很多
与iframe相关的 location.hash、window.name、postMessage
WebSocket通信协议以及其它Ajax的改进方法
如何选择
比如单向的数据请求，我们应该优先选择JSONP或者window.name，
双向通信优先采取location.hash
在未与数据提供方达成通信协议的情况下我们也可以用server proxy的方式来抓取数据
参考一 深入理解前端跨域方法和原理
参考二 JS 高程
感谢大家观看
BY : 陈占乐