近期项目需使用JSONP,后端采用Node提供接口,前端通过Angular进行对接,实现跨域数据请求与处理。
1、 JSON是一种用于数据交换的格式,如同暗号般传递信息,用特定结构描述数据内容。
2、 优点:
3、 轻量跨平台纯文本工具
4、 原生兼容,后台语言全面覆盖。
5、 易于阅读,编写解析更顺畅。
6、 Jsonp是一种非官方的跨域数据交互协议,通过脚本标签实现数据传输,是浏览器与服务器间信息交换的约定方式。
7、 同源指协议、域名、端口均相同,不同源请求会被浏览器拦截,Jsonp技术用于解决此类跨域访问问题。
8、 客户端向服务端传入一个回调函数名参数,服务端将其作为函数调用形式,将JSON数据包裹其中并返回给客户端执行。
9、 依据URL参数识别跨区请求,后端查询并返回相应数据。
10、 返回数据:res.jsonp();
11、 启动服务后访问,发现返回数据存在异常情况。
12、 调整数据组装方式
13、 将结果对象转换为JSON字符串,再拼接回调函数名,最终通过响应发送一个JSONP格式的数据。
14、 重启服务命令:node app.js
15、 重新请求指定URL并传入回调函数参数以获取数据响应
16、 AngularJS通过Jsonp实现跨域数据请求。
17、 在服务中调用接口时,通过添加回调函数以JSONP方式实现跨域请求。
18、 通过Chrome开发者工具F12进入Network,点击对应链接,在中间窗口选择Response查看返回数据,确认前端接口已成功对接。
