nodejs express 允许跨域访问(Access-Control-Allow-Origin)

前端之家收集整理的这篇文章主要介绍了nodejs express 允许跨域访问(Access-Control-Allow-Origin)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

前世今生

在WEB应用普及的今天,个人信息(账号、COOKIE等)广泛应用于网页。浏览器同源策略保证了WEB环境的安全性。同源策略是说,在a.com域名下通过ajax或者XmlHttpRequest等方式访问b.com的资源时,是不被允许的。

然而在很多时候,出于业务的的需要,我们经常有类似的跨域访问 的需求。浏览器有一些支持跨域访问的标签,例如script,img等。有这样的需求,自然就衍生了一些解决办法。

比较普遍的是通过jsonp的方式来实现接口。

另外一个方式就是在服务器端配置,允许部分或者所有页面进行跨域访问。

JSONP方式

简单来说,jsonp返回的不是json数据,而且一段通过函数将json数据包起来的js代码。这样,就可以通过script标签来加载这段代码,实现任意服务器的访问。
对于如下一个返回json数据的接口:

http://www.test.com/jsonServerResponse

其对应的jsonp方式的用法如下,其中jsonpCallback是客户端实现的处理json数据的函数

<script>
    var data;
    function jsonpCallback(result) {
        data = result;
    }
</script> <script src="http://www.test.com/jsonServerResponse?callback=jsonpCallback"></script>

前端页面调用接口时,需要以callback=jsonpCallback的形式,将本地实现的处理json数据的函数上传到服务器。跨域服务器实现相应的jsonp接口

http://www.test.com/jsonServerResponse?callback=jsonpCallback

这个接口的返回数据如下

jsonpCallback({'msg':'this is json data'});

可以看出,关键得在服务器端实现jsonp方式的接口,有了这些,客户端就可以自由的跨域了!

服务器端

另外一个办法,直接在服务器端,允许某些来源、某些接口、某些方法以某些形式被跨域调用

nodejs express配置

app.all('/test',function(req,res,next) {
    res.header("Access-Control-Allow-Origin","*");
    res.header('Access-Control-Allow-Methods','PUT,GET,POST,DELETE,OPTIONS');
    res.header("Access-Control-Allow-Headers","X-Requested-With");
    res.header('Access-Control-Allow-Headers','Content-Type');
    next();
});

Nginx配置

然而添加了这些之后,仍然不好使。查了查,可能是要在Nginx上也作设置,在Nginx相应路径添加如下:

location ^~ /test {
    add_header 'Access-Control-Allow-Origin' '*';
    add_header 'Access-Control-Allow-Credentials' 'true';
    add_header 'Access-Control-Allow-Methods' 'OPTION,GET';
    add_header 'Access-Control-Allow-Headers' 'X-Requested-With,Content-Type';
}

之后重新加载Nginx配置即可,大功告成。

更多关于跨域的讨论,欢迎留言!

猜你在找的Json相关文章