使用 SAP Fiori Tools 自带的代理服务器解决本地运行的 SAP UI5 应用访问远端服务遇到的跨域问题试读版

Posted JerryWangSAP

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用 SAP Fiori Tools 自带的代理服务器解决本地运行的 SAP UI5 应用访问远端服务遇到的跨域问题试读版相关的知识,希望对你有一定的参考价值。

我们部署在本地开发环境运行的 SAP UI5 应用,由于浏览器安全策略的限制,无法直接访问远端 OData 服务,原因是我们的 SAP UI5 应用本地运行在 localhost 这个域名上,而远端请求的 OData 服务的域名比如说 services.odata.org,二者不是同一个域名,由于浏览器安全策略,浏览器拒绝这种跨域的 HTTP 访问请求。

笔者的 一套适合 SAP UI5 开发人员循序渐进的学习教程 曾经介绍过很多种不同的办法来解决 SAP UI5 应用本地开发时遇到的这种跨域问题

本文笔者再介绍另一种方法,使用 SAP Fiori Tools 自带的代理服务器中间件(middleware),开发人员既不需要动手亲自开发代理服务器,也不需要下载第三方的代理服务器然后在本地安装,而是直接在 SAP UI5 本地工程的 ui5.yaml 文件里进行简单配置即可。

本步骤基于的例子仍然是步骤 24 即消费远端 OData 服务 https://services.odata.org/V2/Northwind/Northwind.svc/.

在步骤 24 里,我们直接禁掉了 Chrome 浏览器的安全检查策略。在上面提到的其他教程文章里,笔者使用了自定义或者第三方的代理服务器,来规避跨域访问 OData 服务的错误。

我们先查看按照本文介绍的步骤完成后,达到的效果。

运行在 localhost 上的本地 SAP UI5 应用,能否成功访问远端 https://services.odata.org 上的 OData 服务,并将 invoice 列表取回来显示在应用的表格控件里。

下面是该步骤的详细实现过程讲解。

SAP Fiori应用的三种部署方式

技术分享图片

封面图片来自Google搜索,关键字: Fiori Deployment

方式1 On premise环境下以BSP应用作为Fiori应用部署和运行的载体

在SAP成都labs我曾经担任过CRM这几个Fiori应用的开发和维护工作:

技术分享图片

在Google上搜索关键字Fiori Architecture, 能找到这样一张图片,其中CRM和S/4 HANA的Fiori应用都以BSP应用的方式运行在下图我标注了红色方框的ABAP前台服务器上。

技术分享图片

以CRM的My lead应用为例,在Chrome的development tool里能找到其对应的BSP应用名称为crm_leads,
技术分享图片

用SAPGUI登录这台前台服务器,使用事务码SE80即可打开该BSP应用,里面的层级结构和Chrome的development tool里观察到的一致(前提是您使用ctrl+alt+shift+p加载了调试版本的应用源码)
技术分享图片

我们可以用各种IDE(比如Eclipse, Sublime, Atom, Webstorm)等进行Fiori应用开发,然后使用report /UI5/UI5_REPOSITORY_LOAD将本地工程上传到前台服务器,具体步骤参考这篇博客Deploy a Fiori app in SAP Fiori

另外,Eclipse有个SAP开发的插件叫做ABAP Repository Team Provider,使用它可以实现UI5应用的一键部署,具体步骤请参考博客: How to Deploy and Run SAPUI5 application on ABAP Server

您也可以尝试使用WebIDE做开发,然后通过WebIDE将应用部署到ABAP前台服务器。
细节请参考博文:How to deploy the Web IDE UI5 application to ABAP repository

这篇博文来自我的同事,SAP成都C4C开发团队的Wu David,高大帅气的程序猿,而且有一手精湛的厨艺。

方式2 部署并运行在On Cloud环境下

如果说前一种方式成功地使得SAP传统的运行在Netweaver平台的BSP技术继续发光发热,那么这第二种方式则体现了SAP拥抱云,拥抱变化的决心。这种方式部署的Fiori已经和Netweaver与ABAP平台再无任何关联。目前SAP成都所有基于云的产品开发团队无一例外地采用了这种方式。

SCP(SAP Cloud Platform)是SAP倾力打造的云平台,假设您已经开发好了一个Fiori应用,想将其部署并且运行在SCP上,您可以参考来自SAP成都云开发团队的Chen Vicky, 一位年轻漂亮的程序媛的博文:How to deploy UI5 application on SCP

(Vicky虽然2016年7月毕业才加入SAP成都, 在学校期间只有几个月的ABAP实习的项目经历,但是通过她的努力以及组内其他老同事的帮助,她现在已经成为了一名合格的Java和JavaScript开发人员)

在此基础上,我也做过一些简单的练习,比如开发一个Fiori应用,将其部署在SCP上,并且能够访问另一台On premise服务器上的数据: Deploy your web application to SAP Cloud Platform which can access resource from On-Premise ABAP system

当然您也可以选择其他的云平台运行您的Fiori应用,如百度云,阿里云,以及国外的云平台例如Heroku上: Step by step to host your UI5 application in Heroku

您甚至可以将您的Fiori应用部署并运行在github上, 虽然github的本来用途并不是这个 :)
Use GitHub Pages to host your OpenUI5 app

顺便说一句,不知道大家读过阮一峰的这篇文章没: 搭建一个免费的,无限流量的Blog----github Pages和Jekyll入门

在文末的评论区,国内的网友对应不应该用github拿来做存储代码以外的事情,引发了激烈的讨论。

就我的观察而言,很多国内前端大牛都选择了把自己的博客部署在了github上。

值得一提的是SAP Hybris Cloud for Customer, 虽然其后台仍然基于Netweaver ABAP, 但是C4C的UI应用的部署方式没有采用本文介绍的方式一,而是本章节正在介绍的方式二。

方式3 打包成平台原生应用安装在移动设备上

还是以SAP Hybris Cloud for Customer为例,我们使用Cordova这个开源框架,将开发人员用JavaScript+HTML开发好的Fiori应用打包生成iOS, Android和Windows Phone对应的安装包然后安装到移动设备上。
这就意味着,SAP成都C4C开发团队的开发团队,在本地IDE写完代码之后,付出了大量的努力来确保我们开发好的功能不仅在PC端各种支持的浏览器下能够正常工作,同时在C4C支持的iOS, Android和Windows phone设备上依然能够正常工作。
尽管我们设计了非常完备的单元测试来覆盖我们开发的功能,为了严格确保我们发布的产品质量,在移动设备上我们也有大量的人工测试。
因此,万一您在使用C4C的时候遇到一些这样那样的问题,麻烦您给C4C对应模块报incident, 但是不要因此怀疑我们为了确保产品质量而付出的这些心血。

如果您已经开发好了Fiori应用,想装到您的手机上玩一玩,可以参考我的博客:
Step by step to package a Fiori application into your Android device using Cordova

如果您的Fiori应用想访问手机设备上的一些只有手机原生操作系统才能提供的功能,那么您可以参考我的博客Step by step to create a custom Cordova plugin for Android and consume it in your UI5 application

上面这篇博客以Android平台开发为例做了Cordova自定义插件的开发介绍:我在Android平台用Java实现了一个自定义的Cordova插件,然后在Fiori应用里消费这个自定义插件。

既然涉及到插件的开发,不可避免地就会遇到调试问题。我的这篇博客以Android studio为例描述了基于Java的自定义插件的调试步骤。

How to debug UI5 application packaged into a mobile device via Cordova with a custom plugin

要获取更多Jerry的原创技术文章,请关注公众号"汪子熙"或者扫描下面二维码:
技术分享图片

技术分享图片










以上是关于使用 SAP Fiori Tools 自带的代理服务器解决本地运行的 SAP UI5 应用访问远端服务遇到的跨域问题试读版的主要内容,如果未能解决你的问题,请参考以下文章

SAP Fiori - 主题

SAP Fiori应用的三种部署方式

如何让SAP S/4HANA的Material Fiori应用配置到Fiori Launchpad里

SAP Fiori应用的三种部署方式

SAP Fiori 和 Movilizer 有啥区别?

深入掌握 SAP Fiori Elements 工作原理的前提条件:理解 Smart Field