在使用JQuery的Ajax从服务器请求数据或者向服务器发送数据时常常会遇到跨域无法请求的错误,常用的解决办法就是在Ajax中使用JSONP。基于安全性考虑,浏览器会存在同源策略,然而<script/>标签却具有跨域访问数据的能力,这就是JSONP工作的基本原理。有关同源策略以及什么是JSONP,可以参考园子里的这篇文章http://www.cnblogs.com/yuzhongwusan/archive/2012/12/11/2812849.html

  在Node.js中实现JSONP非常简单,通过下面的代码我们从服务器返回并运行一个JavaScript函数,这个JavaScript函数已经在调用方提前被定义好了,于是当它被返回的时候就自动执行了。

var express = require('express');
var router = express.Router(); router.get('/getinfo', function(req, res, next) {
var _callback = req.query.callback;
var _data = { email: 'example@163.com', name: 'jaxu' };
if (_callback){
res.type('text/javascript');
res.send(_callback + '(' + JSON.stringify(_data) + ')');
}
else{
res.json(_data);
}
}); module.exports = router;

代码中必须规定从服务器返回数据的类型,代码res.type('text/javascript')被加在返回的数据之前用于告诉浏览器这是一段JavaScript代码。

  前端页面通过JQuery调用:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jsonp test</title>
<script src="/bower_components/jquery/dist/jquery.js"></script>
</head>
<body>
<input type="button" value="click" id="btn">
<script type="text/javascript">
$(function(){
$('#btn').on('click', function(){
$.get('http://anothersite/api/getinfo', function(d){
console.log(d);
}, 'jsonp');
});
});
</script>
</body>
</html>

当然,如果使用express,则可以直接使用下面的代码:

router.get('/getinfo',function  (req,res,next) {
var _data = { email: 'example@163.com', name: 'jaxu' };
res.type('application/json');
res.jsonp(_data);
});

最新文章

  1. SQL Server-聚焦计算列或计算列持久化查询性能(二十二)
  2. Sublime Text执行js
  3. 转:仿QQ长按弹出功能菜单
  4. Tomcat中JVM内存溢出及合理配置
  5. Effective C++ 之 Item 3:尽可能使用 const
  6. C语言-------多文件编译
  7. 关于hadoop2.4.1伪分布式系统的搭建
  8. Vim Vundle 插件管理器
  9. RMAN之进入RMAN(转)
  10. 新版C#编译器关于函数闭包
  11. javascript 特殊的面向对象以及继承详解(入门篇)
  12. Filecoin: 影响力容错(PFT)和预期共识(EC)
  13. 一次ES故障排查过程
  14. 5.django学习模型
  15. PHP导出excel表格
  16. Machine Learning系列--深入理解拉格朗日乘子法(Lagrange Multiplier) 和KKT条件
  17. dsPIC33EP 时钟初始化程序
  18. android-修改TextView中部分文字的颜色
  19. .net MVC 页面页面跳转后提示消息实现办法
  20. VS mfc MessageBox() 和 AfxMessageBox()

热门文章

  1. 201871010117-石欣钰《面向对象程序设计(java)》第十五周学习总结
  2. 精通awk系列
  3. 万字长文把 VSCode 打造成 C++ 开发利器
  4. c语言中各个循环的流程图——方便记忆
  5. CF261E Maxim and Calculator
  6. Identity入门2:AuthenticationManager【转】
  7. Spring Cloud微服务安全实战_4-2_常见的微服务安全整体架构
  8. [TJOI2019]唱,跳,rap,篮球(生成函数,组合数学,NTT)
  9. uniApp上传图片
  10. jquery + node 通过 CORS 实现跨域访问,支持cookie和自定义header