福永外贸网站建设,中国空间站扩展,临海建设银行网站,东莞保安招聘网今天在玩vue-resource时#xff0c;后台使用nodejs来提供数据#xff0c;由于需要跨域#xff0c;在网上也找到了解决方法。 vue-resource代码(其实就是ajax技术)#xff1a; this.$http.get({url:http://localhost:3000/getdata})
.then(function (data) {co… 今天在玩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;charsetutf-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数据的函数。
scriptvar data;function jsonpCallback(result) {data result;}
/script
script srchttp://www.test.com/jsonServerResponse?callbackjsonpCallback/script1234567 前端页面在调用接口时需要以callbackjsonpCallback的形式将本地实现的处理json数据的函数上传到服务器。跨域服务器实现相应的jsonp接口
http://www.test.com/jsonServerResponse?callbackjsonpCallback1 这个接口的返回数据如下
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();
});1234567 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;
}123456 之后重新加载nginx配置即可大功告成。
