在nodejs服务器和ABAP服务器上使用jsonp-阿里云开发者社区

开发者社区> jerrywangsap> 正文

在nodejs服务器和ABAP服务器上使用jsonp

简介: 在nodejs服务器和ABAP服务器上使用jsonp
+关注继续查看

In my blog Cross domain request in ABAP and Java with two workaround I introduce the step how to deal with Cross Domain issue using Cross-origin resource sharing ( CORS ) supported by almost all modern browsers.


And there is another alternative for cross domain issue, that is JSONP which can work on legacy browsers which predate CORS support.


In this blog, I will first explain how to use JSONP and then introduce the secret behind it.


JSONP in nodeJS server

Suppose I have two employee ID lookup service hosted by the port 3000 and 3001 in my local server. The service will simply return employee name by ID.


The client web page is hosted in port 3000. According to same origin policy, the web page hosted in port 3000 is allowed to access the service hosted in localhost:3000, but forbidden for localhost:3001.


image.png


Let’s now do a verification.

This is my server listening to port 3000:

image.png

And this is my client page which allows end user to type the employee ID and send the query request:

image.png

When I click Submit button, I get query response returned from service in port 3000 as expected:



image.png


And this is the log output in the console of service in port 3000:


image.png


Now I make small modification on the web page in port 3000, forcing it to send request to port 3001 instead:


image.png


And resend the id query, this time I saw the expected cross domain error message:

image.png



How to resolve cross domain issue using JSONP

Both minor changes in client and server side are necessary.


In service working in port 3001, I add a new service end point “request_jsonp”:

image.png

In client web page, I change the send AJAX data type from json to jsonp, and inform server that “please parse the callback function name from literal “callback” in request header.


image.png

Now send the query again from localhost:3000 page, and the request could successfully reach service in localhost:3001, handled there and return to localhost:3000 again:


image.png


Magic behind JSONP

In fact, no magic at all. The mechanism of JSONP just utilize the “benefit” that the HTML


When I send the AJAX call with data type jsonp, a new script element is created on the fly. The employee ID specified by end user is also appended as a query field in request header.


image.png


In server side, the response to this JSONP request is NOT json data, but a fragment of executable JavaScript code. I add a print statement to make it more clear:


image.png



Once this response returns to client side, it will get executed immediately there as a reaction to jsonp request sent from client.


For more detail explanation you can refer to Wikipedia How JSONP works.


JSONP in ABAP Server

Suppose I have a web page in system AG3/001 which would like to access service in AG3/815.

Create a ICF service in AG3/815:


image.png


AG3/001 has port 44354 and AG3/815 port: 44356

The web page is put in AG3/001 which has almost exactly the same code in previous nodeJS chapter.

This request fails as expected.


image.png


Now enhance the ICF handler class with JSONP support: return a string which contains executable JavaScript code instead:

image.png

And click on submit button of web page in AG3/001, this time it works:

image.png

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云新版人脸识别 NODEJS 使用示例教程
本篇博客是对前面多语言开发阿里云新版人脸识别的续,主要介绍使用NODE JS SDK调用人脸识别的接口。
6629 0
fastjson解析json字符串,key缺少双引号导致下游服务无法解析
背景说明 在使用fastjson 1.2.60版本将对象转化为json字符串时,为处理Map值为null的情况,采用了WRITE_MAP_NULL_FEATURES属性,但该属性解析出来的key中缺少双引号,在key包含特殊字符时,如“-”和“:",下游服务在进行反序列化时出现无法解析的错误,从而出现问题。
3059 0
使用 NodeJS+Express+MySQL 实现简单的增删改查
关于node.js暂时记录如下,以后有时间一定学习 文章来自简书,作者:sprint,2016-07 使用 Node.js + Express+MySQL 实现简单的增删改查 https://www.jianshu.
2489 0
阿里云AMQP NodeJS SDK使用Demo
消息队列RabbitMQ版是阿里云消息队列(MQ)团队基于AMQP 0-9-1(AMQP 0.91)标准协议研发的分布式、高吞吐、低延迟、高可扩展的云消息队列服务。消息队列RabbitMQ版完全兼容开源RabbitMQ社区、开箱即用、无需部署、免运维,帮助您快速上云。阿里云提供全托管服务,更专业、更可靠、更安全。本文主要演示如何使用开源NodeJS SDK连接阿里云AMQP 消息服务,实现消息收发。
345 0
如何使用Retrofit获取服务器返回来的JSON字符串
有关Retrofit的简单集成攻略,大家可以参考我此前的一篇文章有关更多API文档的查阅请大家到Retrofit官网查看。 在大家使用网络请求的时候,往往会出现一种情况:需要在拿到服务器返回来的JSON字符串,而Retrofit会默认将Json解析,而又没有直接暴露出拿到Json字符串的方法,经过在网上一定的查阅,再次给大家一个简单的办法,就能够拿到Json字符串。
802 0
使用forever让nodejs应用后台执行
    使用终端连接执行nodejs后,用户断开客户连接,服务就stop了。于是可以用forever,后台执行命令,然后保持服务运行     yum install forever -y        #安装      forever start app.
607 0
Android客户端与服务器端的json数据交互(很详细)
分类: Android学习2014-03-17 21:20 1426人阅读 评论(0) 收藏 举报  Android客户端与服务器端的json数据交互,主要是通过json形式的数据交互,就是json的写入和解析。
716 0
如何使用 NodeJS 构建基于 RPC 的 API 系统
> * 原文地址:[How to build an RPC based API with node.js](https://scotch.io/@alloys/how-to-build-an-rpc-based-api-with-nodejs) > * 原文作者:[Alloys Mila](https://scotch.io/@alloys) > * 译文出自:[阿里云翻译小组](https:
1520 0
+关注
2628
文章
0
问答
来源圈子
更多
+ 订阅
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载