Nodejs(七)-跨域访问

阅读更多

转载自: http://xfhnever.com/blog/2014/08/14/nodejs-crossdomainaccess/

 

今天在使用ajax(http://localhost:8080%EF%BC%89%E8%B0%83%E7%94%A8nodejs%E5%86%99%E7%9A%84restfulAPI(http://localhost:3000%EF%BC%89%E6%97%B6%EF%BC%8C%E6%8A%A5%E4%BA%86%E5%A6%82%E4%B8%8B%E4%B8%80%E4%B8%AA%E9%94%99%E8%AF%AF%EF%BC%9A

XMLHttpRequest cannot load http://localhost:3000/mock/items. 
No 'Access-Control-Allow-Origin' header is present on the requested
resource. Origin 'http://localhost:8080' is therefore not allowed access.

晚上说不能跨域访问,完全不懂这个概念啊,所以简单介绍一下。

解决方案

首先给大家介绍一下这个问题的解决方案,我是在node代码中设置跨域访问。

var app = express();  
//设置跨域访问  
app.all('*', function(req, res, next) {  
    res.header("Access-Control-Allow-Origin", "*");  
    res.header("Access-Control-Allow-Headers", "X-Requested-With");  
    res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");  
    res.header("X-Powered-By",' 3.2.1')  
    res.header("Content-Type", "application/json;charset=utf-8");  
    next();  
}); 

把Access-Control-Allow-Origin设置为‘*’,表示任意origin可以访问该API. 在实际应用中这样是不安全的,需要制定具体的origin。

当然也可以只对某些url设置跨域访问:

router.get('/', function(req, res) {
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.send('respond with a resource');
});

何为跨域

域(Domain)是Windows网络中独立运行的单位,域之间相互访问则需要建立信任关系(即Trust Relation)。信任关系是连接在域与域之间的桥梁。当一个域与其他域建立了信任关系后,2个域之间不但可以按需要相互进行管理,还可以跨网分配文件和打印机等设备资源,使不同的域之间实现网络资源的共享与管理。

跨域请求,顾名思义,就是一个站点中的资源去访问另外一个不同域名站点上的资源。这种情况很常见,比如说通过style标签加载外部样式表文件、通过 img 标签加载外部图片、通过 script 标签加载外部脚本文件、通过 Web font 加载字体文件等等。默认情况下,脚本访问文档属性等数据采用的是同源策略(Same origin policy)。

同源策略:如果两个页面的协议、域名和端口是完全相同的(IE的同源策略不包含端口),那么它们就是同源的。同源策略是为了防止从一个地址加载的文档或脚本访问或者设置从另外一个地址加载的文档的属性。如果两个页面的主域名相同,则还可以通过设置document.domain 属性将它们认为是同源的。

出于安全性考虑,浏览器将不允许跨域页面间的JS相互操作,如:主页面和跨域IFrame之间的JS操作,也不允许XMLHttprequest请求跨域内容。

在浏览器中不能直接来跨域访问,而在服务器端没有跨域安全限制。

其他解决方法

  1. 主域名相同的跨域情形

    设置document.domain属性。如果想做到数据的交互,那么www.aa.com和book.aa.com必须由你来开发才可以。可以将book.aa.com用iframe添加到 www.aa.com的某个页面下,在www.aa.com和iframe里面都加上document.domain = “aa.com”,这样就可以统一域了,可以实现跨域访问。就和平时同一个域中镶嵌iframe一样,直接调用里面的JS就可以了。

  2. HASH传值

    当两个域不同时,如果想相互调用,那么同样需要两个域都是由你来开发才可以。用iframe可以实现数据的互相调用。解决方案就是用window.location对象的hash属性。hash属性就是http://domian/web/a.htm#dshakjdhsjka 里面的#dshakjdhsjka。利用JS改变hash值网页不会刷新,可以这样实现通过JS访问hash值来做到通信。不过除了IE之外其他大部分浏览器只要改变hash就会记录历史,你在前进和后退时就需要处理,非常麻烦。不过再做简单的处理时还是可以用的。大体的过程是页面a和页面b在不同域下,b通过iframe添加到a里,a通过JS修改iframe的hash值,b里面做一个监听(因为JS只能修改hash,数据是否改变只能由b自己来判断),检测到b的hash值被修改了,得到修改的值,经过处理返回a需要的值,再来修改a的hash值(这个地方要注意,如果a 本身是那种查询页面的话比如http://domian/web/a.aspx?id=3,%E5%9C%A8b%E4%B8%AD%E7%9B%B4%E6%8E%A5parent.window.location%E6%98%AF%E6%97%A0%E6%B3%95%E5%8F%96%E5%BE%97%E6%95%B0%E6%8D%AE%E7%9A%84%EF%BC%8C%E5%90%8C%E6%A0%B7%E6%8A%A5%E6%B2%A1%E6%9C%89%E6%9D%83%E9%99%90%E7%9A%84%E9%94%99%E8%AF%AF%EF%BC%8C%E9%9C%80%E8%A6%81a%E6%8A%8A%E8%BF%99%E4%B8%AA%E4%BC%A0%E8%BF%87%E6%9D%A5%EF%BC%8C%E6%89%80%E4%BB%A5%E4%B9%9F%E6%AF%94%E8%BE%83%E9%BA%BB%E7%83%A6%EF%BC%89%EF%BC%8C%E5%90%8C%E6%A0%B7a%E9%87%8C%E9%9D%A2%E4%B9%9F%E8%A6%81%E5%81%9A%E7%9B%91%E5%90%AC%EF%BC%8C%E5%A6%82%E6%9E%9Chash%E5%8F%98%E5%8C%96%E7%9A%84%E8%AF%9D%E5%B0%B1%E5%8F%96%E5%BE%97%E8%BF%94%E5%9B%9E%E7%9A%84%E6%95%B0%E6%8D%AE%EF%BC%8C%E5%86%8D%E5%81%9A%E7%9B%B8%E5%BA%94%E7%9A%84%E5%A4%84%E7%90%86%E3%80%82

  3. JS脚本植入

    通过页面动态加载

你可能感兴趣的:(jsonp,cors)