跨域问题的前后端解决方案

跨域问题是开发过程中一个比较常见的问题，无论你是前台开发，还是后台开发，可能都处理过这个问题。本文主要是介绍跨域常用的解决方案。

什么是跨域？

假设有这么一个场景，我有一个网站，在里面有一个显示商品的功能，对应的页面地址是：

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
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。