跨域解决方案(基于nodejs)

依然饭跑跑

转载自：
跨域是web开发过程中经常会遇见的一种问题，因为javascript的同源策略的限制，a.com域名下是无法操作b.com下的对象或者调用接口的。

• 什么情况算跨域？
  

request urlresponse url说明是否允许通讯www.a.com/a.jswww.a.com/b.js同一域名允许www.a.com/a.jswww.a.com:8080/b.js同一域名，端口不同不允许http://www.a.com/a.jshttps://www.a.com/b.js同一域名，协议不同不允许www.a.com/a.jsblog.a.com/b.js一级域名相同，二级域名不同不允许www.a.com/a.jswww.b.com/b.js不同域名不允许 
目前解决跨域的方法比较多，通常有iframe、动态创建script、document.domain、flash、jsonp、cors、postMessage这几种。但本文只给出jsonp、cors与postMessage三种的测试例子。
 
测试环境

• node.js ~0.12.0
  
• express ~4.12.1
  
• jade ~1.9.2
  

 
1. JSONP
JSONP跟JSON是什么关系？JSONP的实现原理是什么？我就不造轮子了，因为我也是看了别人的文章才理解的，直接推荐一篇讲得很清晰的博文。了解后，就开始本地的代码测试吧。
本地模拟跨域
本地要模拟跨域，一开始我是通过使用node启动一个地址为127.0.0.1:3000的server，然后本地在配一个frend.com（这个是nginx启动的一个静态资源server，端口是80，host配置中指向127.0.0.1）。然而这个在调试的过程中居然不跨域，普通的ajax请求居然通过了，这个我也不太理解。 
既然上面的情况不算跨域，那我只能起两个不同端口的server了。所以我在本地起了两个基于node的server，但端口分别为3000和3001，来实现跨域。以下就是通过两个端口不一样的服务来测试jsonp解决跨域的方案：

• server1: localhost:3001，作为响应端
  

响应端代码：

响应端启动log：

• server2: localhost:3000，作为请求端
  

请求端代码：

请求端启动log：

• 浏览器访问localhost:3000，响应如下：
  

 
☞下载JSONP例子源码☜
JSONP总结
JSONP实现的原理很简单而且使用jquery的api会非常的方便，只需要配合后台定义好的接口。但是也有缺点，就是只支持GET的请求方式，如果需要使用POST或者传输大量的数据的时候，那我们就只能选择其他方式了，例如下面介绍的CORS。
 
2. CORS
CORS(Cross-Origin Resource Sharing)即跨域资源共享，也是一种实现跨域访问的方法。
CORS的实现原理很简单，只需要在响应端的头信息配置一个Access-Control-Allow-Origin的响应信息即可。

• a) 没有配置Access-Control-Allow-Origin时，http://localhost:3000向http://localhost:3001发起ajax请求，跨域请求失败。
  
• b) 设置Access-Control-Allow-Origin: http://localhost:3000：
  

响应代码：

请求代码：

浏览器访问http://localhost:3000，响应如下：

• c) 设置Access-Control-Allow-Origin: *，注意这里的*是指所有来源都可以调用该接口：
  

请求代码：

浏览器访问http://localhost:3000，响应如下：

☞下载CORS例子源码☜
 
CORS总结
CORS在使用起来非常方便，但也有缺点。

• ① 兼容性，下图可见，对于需要兼容IE6-7的网站来说，这种方案还是存在着不满足需求的情况。但是对于现代浏览器，特别是在移动端可以放心使用。
  

• ② 安全性
  

CORS提供了一种简易的跨域请求方案，但是并没有为安全访问提供足够的保障机制，例如上面Access-Control-Allow-Origin: *的情况，所有使用者都可以请求改接口，这给服务端带来了巨大的安全隐患。如果需要保障安全，请参考OAuth2。
 
3. postMessage
postMessage是html5引入的message的API，可以更加方便、有效、安全的解决iframe嵌套跨域问题。详情见postMessage使用文档 - MDN。

• 主页面
  

• iframe页面
  

• 浏览器访问http://localhost:3000，响应如下：
  

☞下载postMessage例子源码☜
 
postMessage总结
postMessage使用非常简单，但是在浏览器支持上对于IE6-7存在不足，如下图：

但是现代浏览器对于使用postMessage还是非常有效的，特别是在移动端。