一键部署开箱即用的代理服务器,解决 SAP UI5 应用开发过程中访问远端 OData 服务的跨域问题试读版

本文涉及的产品
可视分析地图(DataV-Atlas),3 个项目,100M 存储空间
简介: 一键部署开箱即用的代理服务器,解决 SAP UI5 应用开发过程中访问远端 OData 服务的跨域问题试读版

一套适合SAP UI5 初学者循序渐进的学习教程

 

作者简介

 

Jerry Wang2007 年从电子科技大学计算机专业硕士毕业后加入 SAP 成都研究院工作至今。Jerry SAP 社区导师,SAP 中国技术大使。在长达 15 年的 SAP 标准产品开发生涯里,Jerry 曾经先后参与 SAP Business ByDesign, SAP CRM, SAP Cloud for Customer, SAP S/4HANA, SAP Commerce Cloud(电商云)等标准产品的研发工作。

 

Jerry 工作中使用ABAP, Java, JavaScript TypeScript 进行开发, 对包括 SAP UI5 在内的多款SAP 自研框架有深入的研究。

 

教程目录

 


说明


Jerry 从 2014 年加入 SAP成都研究院 CRM Fiori 开发团队之后开始接触 SAP UI5,曾经在 SAP 社区和“汪子熙”微信公众号上发表过多篇关于 SAP UI5 工作原理和源码解析的文章。


在 Jerry 这篇文章 对 SAP UI5 一无所知的新手,从哪些材料开始学习比较好? 曾经提到,Jerry 也是从 SAP UI5 菜鸟一路走过来,深知只有 ABAP 开发背景的开发者,向 SAP UI5 开发领域转型的不易,因此我在业余时间设计了这份适合 SAP UI5 不同水平的学习者的学习教程,把开发一个完整的 SAP UI5 应用的流程,拆分成若干个步骤,力求每个步骤里,把涉及到的知识点都涵盖到。


这些知识点可能不像我的 UI5 源码分析系列文章那么深入,但力求做到深入浅出,重要的知识点都配上详细的截图来辅助文字的介绍,便于教程学习者的理解。



本教程每一个步骤的源代码,都存放在我的 Github 上,分别用文件夹 01,02,03 等等来标识,例如步骤 1 的源代码在这里



每一个步骤均是前一步骤的基础上,添加了若干新特性。建议零基础或者对 SAP UI5 知之甚少的 SAP UI5 初学者,按照顺序从第一个步骤开始循序渐进地学习,把这些代码下载到本地,配合教程的文字讲解,自己动手,以加深理解。


对于已经有一定基础的 SAP UI5 开发人员,可以通过本文的目录,跳过前面一部分比较基础的章节,直接挑选对自己工作项目有关,或者包含某些知识点自己尚未掌握的章节来有针对性地学习。


大家如果对教程的每个步骤有任何疑问,欢迎在教程对应的步骤文章里给我评论,进行留言。我虽然平时开发工作很忙,但是保证会定期查看大家给我留下的评论,对于里面涉及到的技术疑问,我一定会抽时间做出解答。


本教程第 24 个步骤,SAP UI5 应用开发教程之二十四 - 如何使用 OData 数据模型,我们介绍 SAP UI5 应用里消费远端 OData 服务 https://services.odata.org/V2/Northwind/Northwind.svc 时,遇到了一个跨域错误:

Access to XMLHttpRequest at ‘https://services.odata.org/V2/Northwind/Northwind.svc/$metadata?sap-language=EN’ from origin ‘http://localhost:8080’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.


原因是我们的 SAP UI5 应用本地运行在 localhost 这个域名上,而请求的 OData 服务的域名为 services.odata.org,二者不是同一个域名,由于安全原因,浏览器拒绝这种跨域的 HTTP 访问请求。


解决这个跨域错误的思路有很多种,比如我介绍了使用 chrome.exe 的启动参数 --disable-web-security, 来临时禁掉其安全策略检查。


创建一个批处理文件,取名为 chrome.bat, 维护如下内容:


cd C:\Program Files (x86)\Google\Chrome\Application
chrome.exe --user-data-dir="C:/temp" --disable-web-security


执行这个批处理文件启动 Chrome,在这个 Chrome 窗口里,就可以直接从运行在 localhost:8080 上的 SAP UI5 应用里,访问远端 OData 服务而不遇到跨域错误了:





然后本教程 SAP UI5 应用开发教程之二十五 - 使用自开发的代理服务器解决 SAP UI5 应用访问远端 OData 服务的跨域问题,笔者介绍了一种自开发 Node.js 代理服务器的方式来规避 SAP UI5 应用开发阶段访问远端 OData 服务的跨域问题。




架构图如上所示。


笔者一直也在思考这个问题:我们的需求很简单,就是期望在开发阶段,可以正常的在本地通过 ui5 serve 启动的 SAP UI5 应用里,访问到远端 OData 服务。按照教程 25 介绍的步骤,我们编写了 80多行的 Node.js 代理服务器,虽然是顺带学习了 Node.js 服务器的开发技术,但未免有杀鸡用牛刀的感觉。


最近笔者了解到了一款开箱即用的代理服务器,专门解决我们遇到的上述痛点。


关于该代理服务器的名称和具体使用方式,下面进行详细介绍。


相关实践学习
基于Hologres轻松玩转一站式实时仓库
本场景介绍如何利用阿里云MaxCompute、实时计算Flink和交互式分析服务Hologres开发离线、实时数据融合分析的数据大屏应用。
阿里云实时数仓实战 - 项目介绍及架构设计
课程简介 1)学习搭建一个数据仓库的过程,理解数据在整个数仓架构的从采集、存储、计算、输出、展示的整个业务流程。 2)整个数仓体系完全搭建在阿里云架构上,理解并学会运用各个服务组件,了解各个组件之间如何配合联动。 3 )前置知识要求   课程大纲 第一章 了解数据仓库概念 初步了解数据仓库是干什么的 第二章 按照企业开发的标准去搭建一个数据仓库 数据仓库的需求是什么 架构 怎么选型怎么购买服务器 第三章 数据生成模块 用户形成数据的一个准备 按照企业的标准,准备了十一张用户行为表 方便使用 第四章 采集模块的搭建 购买阿里云服务器 安装 JDK 安装 Flume 第五章 用户行为数据仓库 严格按照企业的标准开发 第六章 搭建业务数仓理论基础和对表的分类同步 第七章 业务数仓的搭建  业务行为数仓效果图  
相关文章
|
30天前
|
存储 安全 测试技术
使用 Visual Studio Code 创建 SAP UI5 项目遇到 self-signed security certificate 相关问题
使用 Visual Studio Code 创建 SAP UI5 项目遇到 self-signed security certificate 相关问题
41 0
|
8天前
|
监控 安全 网络安全
如何选择合适的服务器托管服务?
【6月更文挑战第7天】如何选择合适的服务器托管服务?
15 3
|
18天前
|
弹性计算 Java 关系型数据库
最佳实践:阿里云倚天ECS在千寻位置时空智能服务的规模化应用
当前,千寻已有上千台倚天ECS实例在支撑线上核心业务。
|
19天前
|
弹性计算 运维 Java
最佳实践:阿里云倚天ECS在千寻位置时空智能服务的规模化应用
阿里云、平头哥及安谋科技联合举办的飞天技术沙龙探讨了倚天Arm架构在业务创新中的应用。活动中,千寻位置运维专家分享了将核心业务迁移到倚天处理器ECS实例的成功案例,强调了倚天处理器的高能效比和降本增效优势。迁移过程涉及操作系统、CICD系统和监控系统的适配,以及业务系统的性能测试。目前,千寻已迁移了上千台ECS实例到倚天处理器,实现了成本和效率的显著提升。未来计划继续扩展倚天处理器在核心业务和K8S中的应用。
|
23天前
|
弹性计算 监控 安全
【阿里云弹性计算】ECS实例监控与告警系统构建:利用阿里云监控服务保障稳定性
【5月更文挑战第23天】在数字化时代,阿里云弹性计算服务(ECS)为业务连续性提供保障。通过阿里云监控服务,用户可实时监控ECS实例的CPU、内存、磁盘I/O和网络流量等指标。启用监控,创建自定义视图集中显示关键指标,并设置告警规则(如CPU使用率超80%),结合多种通知方式确保及时响应。定期维护和优化告警策略,利用健康诊断工具,能提升服务高可用性和稳定性,确保云服务的卓越性能。
36 1
|
25天前
|
弹性计算 关系型数据库 MySQL
【阿里云弹性计算】从零搭建:基于阿里云ECS的高性能Web服务部署实践
【5月更文挑战第21天】本文介绍了如何使用阿里云ECS搭建高性能Web服务。首先,注册阿里云账号购买ECS实例,选择合适配置。接着,通过SSH连接实例,更新系统并安装Apache、PHP和MySQL。创建网站目录,上传代码,配置数据库和PHP。然后,启用Gzip压缩和KeepAlive,调整Apache并发连接数以优化性能。此教程为在阿里云上构建高效Web服务提供了基础指南。
129 5
|
26天前
|
网络协议
阿里云服务器搭建DNS解析服务步骤
在阿里云搭建DNS解析服务,首先注册阿里云账号并购买适合的云服务器。获取服务器公网IP后,配置服务器并安装DNS软件如Bind9。接着设置DNS解析,包括定义顶级和子域名的指向。最后,通过ping测试或浏览器访问验证DNS解析功能是否正常。
|
26天前
|
存储 弹性计算 监控
【阿里云弹性计算】阿里云ECS全面解析:弹性计算服务的核心优势与应用场景
【5月更文挑战第20天】阿里云ECS是提供可伸缩计算能力的云服务,支持多种规格实例,满足不同需求。其核心优势包括灵活性、高性能、高可用性、安全性和易用性。适用场景包括网站托管、大数据处理、游戏多媒体应用及测试开发环境。通过Python示例代码展示了如何创建ECS实例,助力企业专注业务发展,简化基础设施管理。
66 5
|
30天前
|
前端开发 数据库 开发者
如何在 SEGW 事务码里为 SAP ABAP OData 服务实现 Function Import 试读版
如何在 SEGW 事务码里为 SAP ABAP OData 服务实现 Function Import 试读版
21 1
|
30天前
SAP ABAP OData 服务里需要指定 guid 类型的请求参数时,正确语法是什么?
SAP ABAP OData 服务里需要指定 guid 类型的请求参数时,正确语法是什么?
17 1