我们部署在本地开发环境运行的 SAP UI5 应用,由于浏览器安全策略的限制,无法直接访问远端 OData 服务,原因是我们的 SAP UI5 应用本地运行在 localhost 这个域名上,而远端请求的 OData 服务的域名比如说 services.odata.org,二者不是同一个域名,由于浏览器安全策略,浏览器拒绝这种跨域的 HTTP 访问请求。
笔者的 一套适合 SAP UI5 开发人员循序渐进的学习教程 曾经介绍过很多种不同的办法来解决 SAP UI5 应用本地开发时遇到的这种跨域问题。
SAP UI5 应用开发教程之二十四 - 如何使用 OData 数据模型
SAP UI5 应用开发教程之二十五 - 使用自开发的代理服务器解决 SAP UI5 应用访问远端 OData 服务的跨域问题
SAP UI5 应用开发教程之一百一十一 - SAP UI5 FileUploader 控件实现本地文件上传,接收服务器端的响应时遇到跨域访问错误
SAP UI5 应用开发教程之一百一十二 - 使用自开发的代理服务器解决 SAP UI5 FileUploader 上传文件时遇到的跨域访问错误
SAP UI5 应用开发教程之一百二十一 - 一键部署开箱即用的代理服务器,解决 SAP UI5 应用开发过程中访问远端 OData 服务的跨域问题
本文笔者再介绍另一种方法,使用 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 列表取回来显示在应用的表格控件里。
下面是该步骤的详细实现过程讲解。