使用 SAP UI5 Custom Middleware 解决前端跨域问题的一次失败尝试试读版

本教程之前已经有多篇文章介绍了本地部署的 SAP UI5 应用，访问远端服务器的 OData 服务时遇到的跨域问题，以及多种解决方案。

• SAP UI5 应用开发教程之二十四 - 如何使用 OData 数据模型

上面的文章，采取的是最丑陋的一种解决方案，即临时禁掉 Chrome 浏览器的安全检查选项：用一种特殊的命令行方式，启动浏览器：

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

紧接着在第 25 篇文章，我们介绍了通过自开发的代理服务器来解决跨域问题的思路：

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

在这个步骤的解决方案里，我们自开发的代理服务器，将远端服务器端返回给 SAP UI5 应用的响应头部字段里，增添了一个名叫 Access-Control-Allow-Origin 的字段，值为 *. 拥有这种头部字段值的 HTTP 响应，浏览器接收到之后，就不会再报跨域错误消息了。

通过代理服务器解决跨域问题的架构如下：

当然，SAP Fiori Tools 自带了一个代理服务器，通过简单的配置即可解决跨域问题：

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

除了使用 SAP Fiori Tools 自带的代理服务器和自开发代理服务器之外，我们还可以使用第三方的代理服务器，也是开箱即用的：

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

既然本教程前一篇文章我们学习了 SAP UI5 Custom Middleware 的开发技术，本文就来动手实战，通过 Custom Middleware 来给发往远端的 OData 请求的响应字段里添加 Access-Control-Allow-Origin 头部字段值，来解决跨域问题。

下面是详细的实现步骤。