SAP UI5 本地开发如何通过 http-proxy 解决跨域问题
2023-09-14 09:03:52 时间
前不久,SAP 发布了新 UI5 工具的官方生产版本。 这当然是 UI5con 上的一个大话题,有几个关于它的会议。对于使用 Visual Studio Code 进行 SAP UI5 本地开发的从业者来说,这个版本里一个非常有用的功能,就是对于 CORS 问题提供的解决方案:代理服务器。
关于 SAP UI5 CORS 问题目前有两种解决方案:
- 代理服务器将您的应用程序的请求转发到 UI5 服务器,后者再转发到您的后端服务器
- UI5 CLI 服务器代理扩展:新工具允许开发人员扩展服务器中间件,从而可以拦截来自客户端的请求并将 OData 请求重定向到后端。
在 OpenSAP 课程中,SAP 使用了 npm 模块 CORS。
这个 CORS npm 模块有两个局限性:
- 使用代理时需要更改应用程序 manifest.json 中的路径。 这意味着开发人员始终需要在部署到系统之前对其进行更改,或者在 CI 设置中进行更改。
- 我在通过身份验证调用服务时遇到了一些困难,还没找到解决问题的办法。
我们首先尝试 proxy 解决方案。
此选项将使用 express 来部署代理服务器。 它需要两个 Node.js 模块:
- http-proxy
- express
在 package.json 中将这些模块定义为 devDependencies 并运行 npm install
来使用它们。
添加一个 node proxy.js
的启动命令行。
在项目的根目录创建一个 proxy.js
文件:
代码关键点:
- 加载所有需要的 npm modules
- 启动 proxy
- 如果 UI5 应用程序正在运行,则定义到主机的路由
- 从另一个配置文件 odata.json 加载到后端服务的路由
- 拦截来自托管代理的所有请求并将其转发到正确的路由。如果匹配请求 url 的模式,它将使用配置文件中的路由,否则它将使用默认的应用程序主机。
完整代码如下:
const express = require('express'),
httpProxy = require('http-proxy'),
fs = require('fs'),
proxy = new httpProxy.createProxyServer();
const appRoute = {
target: 'http://localhost:5000'
};
const routing = JSON.parse(fs.readFileSync('./odata.json'));
var allowCrossDomain = function(req, res) {
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Credentials', 'true');
res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
res.header('Access-Control-Allow-Headers', 'X-Requested-With, Accept, Origin, Referer, User-Agent, Content-Type, Authorization, X-Mindflash-SessionID');
// intercept OPTIONS method
if ('OPTIONS' === req.method) {
res.header(200);
} else {
var dirname = req.url.replace(/^\/([^\/]*).*$/, '$1');
var route = routing[dirname] || appRoute;
console.log(req.method + ': ' + route.target + req.url);
proxy.web(req, res, route);
}
};
var app = express();
app.use(allowCrossDomain);
app.listen(8005);
console.log("Proxy started on http://localhost:8005");
odata.json 的内容:
使用 ui5 serve 启动 SAP UI5 应用:
然后再使用命令行 Npm run proxy
启动代理服务器:
最后的效果:
相关文章
- SAP UI5 Form 表单 Column Layout 下的 Column 个数分配问题
- SAP UI5 sap.ui.layout.Grid 控件宽度百分比的设置原理
- 在 SAP ABAP Gateway 系统上定义后台系统的 Alias
- Go HTTP 编程 | 01 - 使用 http 包创建 Web 服务器
- 关于 SAP Spartacus Angular HTTP Interceptor 的拦截顺序
- SAP Java Connector 正常运行所需的网络配置
- 将SAP系统迁移到云上? 同时带上您的存档数据
- 澄清一些对 SAP UI5 响应式表格 sap.m.Table 的常见理解误区试读版
- WordPress 教程:使用 WP_Http 在 WordPress 中发起 HTTP Request
- SAP 常用表详解编程语言
- SAP中日期时间函数总结详解编程语言
- SAP ABAP常见错误记录之一:In RFC modules, only parameters with pass by value are allowed (参考参数在更新任务中不允许)详解编程语言
- MM SAP报错整理详解编程语言
- ABAP写数据到SAP服务器文件并读取详解编程语言
- SAP 取月度期初库存和月度期末库存(历史库存)-mard和mardh的区别详解编程语言
- 服务器Linux下简易配置HTTP服务器(linux配置http)
- Linux下HTTP抓包实战精要(http抓包linux)
- SAP在Linux系统的安装与使用(sap安装linux)
- 比较:Oracle与SAP的对比(oracle和sap)
- Linux下抓取HTTP包的技术实现(linux抓http包)
- 缓存使用SAP创建Redis缓存,实现高效稳定加速(sap如何创建redis)
- Oracle与SAP权衡利弊比较之路(oracle与sap比较)
- 对比Oracle和SAP价格比较哪个是更值得投入的选择(oracle与sap价格)
- Oracle与SAP的技术潜力比较(oracle sap比较)