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

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

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

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

cd C:Program Files (x86)GoogleChromeApplication
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 头部字段值,来解决跨域问题。

下面是详细的实现步骤。