NodeJS解决跨域问题:Access-Control-Allow-Origin
2018-02-01 17:09
627 查看
vue-resource时,后台使用
nodejs来提供数据,由于需要跨域,在网上也找到了解决方法。
vue-resource代码(其实就是ajax技术):
this.$http.get({url:"http://localhost:3000/getdata"}) .then(function (data) { console.log(data) },function (error) {});
nodejs部分:
var express = require('express'); 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(); }); app.get('/getdata', function(req, res) { res.send({id:req.params.id, name: req.params.password}); }); app.listen(3000); console.log('Listening on port 3000...');
前世今生
在WEB应用普及的今天,个人信息(账号、COOKIE等)广泛应用于网页。浏览器同源策略保证了WEB环境的安全性。同源策略是说,在a.com域名下通过ajax或者XmlHttpRequest等方式访问b.com的资源时,是不被允许的。然而在很多时候,出于业务的的需要,我们经常有类似的跨域访问 的需求。浏览器有一些支持跨域访问的标签,例如script,img等。有这样的需求,自然就衍生了一些解决办法。
比较普遍的是通过jsonp的方式来实现接口。
另外一个方式就是在服务器端配置,允许部分或者所有页面进行跨域访问。
JSONP方式
简单来说,jsonp返回的不是json数据,而且一段通过函数将json数据包起来的js代码。这样,就可以通过script标签来加载这段代码,实现任意服务器的访问。
对于如下一个返回json数据的接口:
http://www.test.com/jsonServerResponse1
其对应的jsonp方式的用法如下,其中jsonpCallback是客户端实现的处理json数据的函数。
<script> var data; function jsonpCallback(result) { data = result; } </script> <script src="http://www.test.com/jsonServerResponse?callback=jsonpCallback"></script>1
2
3
4
5
6
7
前端页面在调用接口时,需要以callback=jsonpCallback的形式,将本地实现的处理json数据的函数上传到服务器。跨域服务器实现相应的jsonp接口
http://www.test.com/jsonServerResponse?callback=jsonpCallback1
这个接口的返回数据如下
jsonpCallback({'msg':'this is json data'});1
可以看出,关键得在服务器端实现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(); });1
2
3
4
5
6
7
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, POST, GET'; add_header 'Access-Control-Allow-Headers' 'X-Requested-With, Content-Type'; }1
2
3
4
5
6
之后重新加载nginx配置即可,大功告成。
相关文章推荐
- 解决nodejs socket.io is not allowed by Access-Control-Allow-Origin 跨域问题 - CNode
- 解决nodejs socket.io is not allowed by Access-Control-Allow-Origin 跨域问题
- angular4 通过httpclient调http接口,出现access-control-allow-origin跨域问题解决办法
- HTML5中Access-Control-Allow-Origin解决跨域问题
- 解决Ajax跨域问题:Origin xx is not allowed by Access-Control-Allow-Origin.
- Golang利用Access-Control-Allow-Origin响应头解决跨域请求问题
- 解决Ajax跨域问题:Origin xx is not allowed by Access-Control-Allow-Origin.
- 解决Ajax跨域问题:Origin xx is not allowed by Access-Control-Allow-Origin.
- HTML5中Access-Control-Allow-Origin解决跨域问题
- Access-Control-Allow-Origin 解决跨域权限问题
- Ajax跨域问题的解决方法之一 —— "Access-Control-Allow-Origin"
- HTML5中Access-Control-Allow-Origin解决跨域问题
- Chrome报错:跨域问题处理( Access-Control-Allow-Origin)_ 用于本地测试的快捷解决方法
- springmvc 数据传输跨域问题 access control allow origin——JSONP数据格式解决
- Access-Control-Allow-Origin 解决跨域权限问题
- HTML5 Access-Control-Allow-Origin解决跨域问题
- 自定义Access-Control-Allow-Origin策略以解决字体文件跨域权限问题
- 解决NodeJS+Express模块的跨域访问控制问题:Access-Control-Allow-Origin
- HTML5中Access-Control-Allow-Origin解决跨域问题
- 解决Ajax跨域问题:Origin xx is not allowed by Access-Control-Allow-Origin.