近期项目需采用jsonp技术,后端基于node.js搭建接口服务,前端借助angular完成对接,以实现跨域数据获取与处理。
1、 JSON是一种轻量级的数据交换格式,如同通信中的加密语言,依靠标准化结构来表达数据内容。
2、 其主要优势包括:
3、 体积小、跨平台、纯文本,便于传输与存储。
4、 浏览器原生支持,主流后端语言均提供完善解析能力。
5、 结构清晰、语义直观,开发人员读写与解析效率高。

6、 JSONP并非W3C标准协议,而是一种利用<script>标签绕过同源策略的跨域通信机制,本质是客户端与服务端约定的一种数据封装与执行方式。
7、 同源策略要求协议、域名、端口三者完全一致;若不满足,则浏览器会阻止AJAX请求,JSONP正是为突破该限制而设计的常见方案。
8、 前端在请求中携带回调函数名作为参数,服务端将目标数据嵌入该函数调用中返回,由浏览器自动执行脚本完成数据注入。

9、 服务端依据URL中传递的callback参数识别JSONP请求,并据此查询业务数据,构造响应内容。

10、 使用Express内置方法:res.jsonp(data) 直接返回JSONP格式响应。

11、 启动服务后访问接口,发现返回结果未能被正确解析,存在格式或执行异常。

12、 优化服务端数据组装逻辑
13、 手动将响应对象序列化为JSON字符串,再将其作为参数拼接到回调函数名后,构造合法JavaScript语句,通过res.send()输出完整JSONP脚本。

14、 执行重启命令:node app.js
15、 再次发起HTTP请求,确保URL中包含callback=xxx参数,验证服务端是否按预期返回可执行的JSONP脚本。

16、 AngularJS框架中可通过$http.jsonp()方法发起跨域请求,天然适配JSONP通信模式。
17、 在Service层调用时,需在URL末尾动态添加callback=JSON_CALLBACK(或自定义函数名),使Angular自动处理响应并触发成功回调。

18、 打开Chrome开发者工具(F12),切换至Network面板,点击对应请求链接,在Response选项卡中查看原始返回内容,确认前后端数据通路已打通且格式正确。



















