AngularJS跨域请求NodeJS的Jsonp接口

2024-11-07 09:25:45

最近一个项目要用到jsonp,node编写的后台提供jsonp接口,前台用angular对接

关于JSON和Jsonp

1、JSON:是一种数据交换的格式,类似接头的暗号,是描述信息的格式。优点:轻量级纯文本跨平台;原生支持,后台语言几乎全部支持;可读性强,易编写解析;

AngularJS跨域请求NodeJS的Jsonp接口

2、Jsonp:是一种非官方跨域数据交互协议,类似接头方式,是信息交换的约定方法同源指的是:同协议,同域名和同端口。不同源的请嫫绑臾潜求,浏览器会阻止,Jsonp就是解决跨域的问题。用户传递一个callback参数给服务端,然后服务端用callback参数作为函数名包裹JSON数据返回给客户端

AngularJS跨域请求NodeJS的Jsonp接口

NodeJS提供Jsonp接口

1、根据URL的参数,后端判断跨区请求,查询数据,返回数据

AngularJS跨域请求NodeJS的Jsonp接口

2、组装数据:res.jsonp(【数据】);

AngularJS跨域请求NodeJS的Jsonp接口

3、启动服务,访问了一下,返回的数据好像有点问题

AngularJS跨域请求NodeJS的Jsonp接口

4、修改组装数据的方法res.send(【callback函数】+ '('+ JSON.stringify(result) + ')');

AngularJS跨域请求NodeJS的Jsonp接口

5、重启服务:node app.js重新访问:url?callback=【callback函数】

AngularJS跨域请求NodeJS的Jsonp接口

AngularJS对接Jsonp

1、AngularJS使用Jsonp:callback=JSON_CALLBACK$http.jsonp(url)在service里访问接口位置添加callback并jsonp形式访问

AngularJS跨域请求NodeJS的Jsonp接口

2、Chrome F12查看network,点击相应的链接,查看中间窗口,点击response查看数据返回,前端对接成功

AngularJS跨域请求NodeJS的Jsonp接口
猜你喜欢