本教程第 4 篇文章，我们介绍了本地启动 SAP Fiori Elements 应用的三种模式。

(相关资料图)

4. SAP Fiori Elements 本地应用启动的三种模式辨析

以默认方式即命令行yarn start启动之后，项目文件夹里的ui5.yaml文件会默认被加载并解析。

ui5.yaml这个文件，在本地开发 Freestyle UI5 时也会遇到，笔者在另一套教程一套适合 SAP UI5 开发人员循序渐进的学习教程里曾经介绍过：

SAP UI5 应用开发教程之九十九 - 深入探讨 SAP UI5 本地开发环境里的 package.json 和 ui5.yaml

SAP UI5 应用开发教程之一百四十五 - SAP UI5 本地开发时 ui5.yaml 文件对构建 Release 版本应用目录的影响分析

本文继续介绍这个ui5.yaml文件和 Fiori Elements 本地开发相关的知识。

迄今为止，我们开发的 Fiori Elements 应用的场景是，运行在本地，即localhost:8080的 Fiori Elements 应用，去调用部署在 SAP ES5 服务器上的 OData 服务，将 OData 服务调用结果显示在浏览器里。

本地应用的协议是 http, 主机名 localhost, 端口号 8080

远端 ES5 OData 服务的地址：，协议是 https, 主机名，端口号 80.

因此这是一个典型的浏览器跨域访问的场景，直接在本地 Fiori Elements 应用里通过 JavaScript 跨域访问 ES5 的 OData 服务，会被浏览器安全策略阻止。

既然浏览器跨域访问是一个极为常见的场景，因此解决这个问题，也存在各种各样的解决方案：

SAP UI5 应用开发教程之二十四番外篇 - 使用 SAP Fiori Tools 自带的代理服务器解决本地运行的 SAP UI5 应用访问远端服务遇到的跨域问题

SAP UI5 应用开发教程之二十五 - 使用自开发的代理服务器解决 SAP UI5 应用访问远端 OData 服务的跨域问题

SAP UI5 应用开发教程之一百一十一 - SAP UI5 FileUploader 控件实现本地文件上传，接收服务器端的响应时遇到跨域访问错误

SAP UI5 应用开发教程之一百一十二 - 使用自开发的代理服务器解决 SAP UI5 FileUploader 上传文件时遇到的跨域访问错误

SAP UI5 应用开发教程之一百二十一 - 一键部署开箱即用的代理服务器，解决 SAP UI5 应用开发过程中访问远端 OData 服务的跨域问题

本教程使用的方式是在 ui5.yaml 里配置fiori-tools-proxy这个代理服务器的解决方案。

我们在 Chrome 开发者工具 network 面板里观察到 Fiori Elements 应用发起的 OData 请求 url：

http://localhost:8080/sap/opu/odata/sap/SEPMRA_PROD_MAN/

可以看到，这个 url 也是以http://localhost:8080开头，因此规避了跨域问题。

但是，localhost:8080 这个主机上并没有/sap/opu/odata/sap/SEPMRA_PROD_MAN/这个 OData 服务，因为该服务是部署在 SAP ES5 服务器上的。

这就是fiori-tools-proxy代理服务器发挥作用的地方。

下面是本文的详细内容。