跨域问题是开发过程中一个比较常见的问题，无论你是前台开发，还是后台开发，可能都处理过这个问题。本文主要是介绍跨域常用的解决方案。
什么是跨域？
假设有这么一个场景，我有一个网站，在里面有一个显示商品的功能，对应的页面地址是：
http://www.myexample.com/page/page-a.html
在实现这个页面时，我通过iframe集成了另外一个网站的商品展示功能，对应的页面地址是：
http://www.othersite.com/page/show.html
页面看起来可能是这样的，我简化了所有的内容，通过不同的背景色来区分不同的页面。
可以想象，我并没有做太多的开发，就拥有一个商品展示功能了。但是在page-a页面中，并不能通过Javascript来访问show页面的document、cookie等对象，不能修改show页面中的任何内容。代码看起来是这样的，运行的时候会产生错误：
document.getElementById("iframe").contentWindow.document;
// Uncaught DOMException: Blocked a frame from accessing a cross-origin frame.
为什么这样设计？
我们反过来思考，如果可以访问document、cookie，会出现什么问题？
可以通过Javascript来监听show页面上的输入框，可以改变表单提交的URL。在myexample这个网站就可以做任何事情了，截获用户的敏感数据了，比如登录信息、个人喜好等数据。结果就是，在你访问一个网站的时候，你的数据很容易就被泄露了，包括用户名和密码。
所以，简单地说就是安全，在WWW创立之初，设计者就考虑到了这个问题，通过一些策略来保证用户信息的安全，防止恶意的网站窃取数据。
A web browser permits scripts contained in a first web page to access data in a second web page, but only if both web pages have the same origin. An origin is defined as a combination of URI scheme, hostname, and port number.
这个叫同源策略（wiki），所有的浏览器都支持这个安全策略。从上面的定义来看，同源指的是三个相同：
1、协议（scheme）相同
2、域名（hostname）相同
3、端口（port）相同
这里又要引入一个新的概念：
URI（wiki）
Uniform Resource Identifier (URI) is a string of characters used to identify a resource.
具体的语法如下图所示：
同源概念中的scheme、host、port对应到上图中的结构，回到我们刚才的例子：
http://www.myexample.com/page/page.html
1、scheme是http
2、host是www.myexample.com
3、port没有表示是80
这样就很容易理解了，跨域就是不同源，两个不同源的网站相互会被限制，限制有三种：
1、Cookie、LocalStorage 和 IndexDB 无法读取。
2、DOM无法获得。
3、AJAX请求不能发送。
前端解决方案
1、修改Domain
浏览器允许通过设置document.domain共享 Cookie，相当于是把两个不同源的页面设置成相同的源，这种方法只适用于 Cookie 和 iframe 窗口，而且要求两个网页一级域名相同，只是二级域名不同。
document.domain='example.com';
2、window通信
这个方案简单的说，就是通过DOM的window对象来传递参数。阮一峰老师总结了三点，非常清晰，我就不重复的去写了：
片段标识符（fragment identifier）
window.name
跨文档通信 API（Cross-document messaging）
详情见：参考资料4
3、JSONP
在一个页面中，可以使用<script>标记来引用一个外部的JS文件，并且能够成功执行。直接上代码可能会更好理解一些。
假设我在某个网站有一个js文件，URL是：http://remoteserver.com/remote.js，里面的代码很简单：
alert('this is a remote alert!');
在另外一个网站的页面http://localserver.com/page.html，可以引入这个JS文件：
<head>
<script type="text/javascript" src="http://remoteserver.com/remote.js"/>
</head>
在浏览器中打开page.html，会弹出一个警告对话框。
JSONP就是利用了这一点，如果将alert的内容改为下面的内容：
localMethod({"result":"data from remote!"});
同时将page.html的内容修改一下
<script type="text/javascript">
function localMethod(data){
alert(data.result);
}
</script>
<script type="text/javascript" src="http://remoteserver.com/remote.js">
再次运行，alert的内容就是:data from remote!
而script元素是可以通过document.createElement('script')动态创建的，也就具备了随时可以引入一个外部script，这样就达到了跨域访问的目的，但是JSONP只支持GET请求，其他的方式不支持。
4、WebSocket
WebSocket是一种通信协议，不实行同源政策，详情见参考资料4。
上面的几种方法，可以说是奇技淫巧，绕过了浏览器的限制。随着前端框架的兴起，以及前后端分离架构的流行，上面的技巧已经比较陈旧了。
后端解决方案
1、URL转发
在同一个窗口中，通过URL提交的方式，多次跳转，需要两边的页面相互支持。
比如在http://www.myexample.com/page/page-a.html页面中，有一个提交按钮，将数据post到远端的服务器，需要告诉对方跳转回来到哪个页面，看起来像这样：
http://www.othersite.com/page/show.html?url=http://www.myexample.com/page/page-b.html
远程服务器show.html处理完成后，再次将数据提交到page-b.html，page-a和page-b是在同一个域下面的，所以就可以相互访问了。
2、HTTP代理
原理就是把远程服务通过代理服务器变成本地的服务，需要借助WEB服务器，Nginx和Apache都支持代理转发。Nginx的配置参考：
location /api/proxy {
proxy_pass http://remoteipaddress:8080/api;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
Node也有开源的组件http-proxy-middleware可以支持代理。
var express=require('express');
var proxy=require('http-proxy-middleware');
var app=express();
app.use('/api',proxy({target:'http://www.example.org', changeOrigin:true}));
app.listen(3000);
3、CORS
详情见参考资料5，非常详细，这里补充一个交互示意图，帮助理解。
以上这些就是跨域的常见解决方案，其中CORS是终极解决方案，可以适用于多种场景。
参考资料：
1.https://developer.mozilla.org/zh-CN/docs/Web/Security/Same-origin_policy
2.https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS
3.https://www.w3.org/TR/cors/
4.http://www.ruanyifeng.com/blog/2016/04/same-origin-policy.html
5.http://www.ruanyifeng.com/blog/2016/04/cors.html
作者：大家叫我杰哥
链接：https://www.jianshu.com/p/fccabaf38ac2
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。