AngularJS跨域请求NodeJS的Jsonp接口

2025-12-14 09:40:45

1、JSON:是一种数据交换的格式,类似接头的暗号,是描述信息的格式。

优点:

轻量级纯文本跨平台;

原生支持,后台语言几乎全部支持;

可读性强,易编写解析;

AngularJS跨域请求NodeJS的Jsonp接口

2、Jsonp:是一种非官方跨域数据交互协议,类似接头方式,是信息交换的约定方法

同源指的是:同协议,同域名和同端口。不同源的请求,浏览器会阻止,Jsonp就是解决跨域的问题。

用户传递一个callback参数给服务端,然后服务端用callback参数作为函数名包裹JSON数据返回给客户端

AngularJS跨域请求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接口

1、AngularJS使用Jsonp:

callback=JSON_CALLBACK

$http.jsonp(url)

在service里访问接口位置添加callback并jsonp形式访问

AngularJS跨域请求NodeJS的Jsonp接口

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

AngularJS跨域请求NodeJS的Jsonp接口

声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢