SAP UI5 架设在 http-proxy 库上的单步调试

简介: SAP UI5 架设在 http-proxy 库上的单步调试

源代码:

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(8085);
console.log("Proxy started on http://localhost:8085");

routing JSON 对象解析出来的结果:

app.use(allowCrossDomain);

设置路由器,对路径 /,使用传入的 allowCrossDomain 函数:

然后监听在 8085 端口上。

我在另一个浏览器窗口,访问 localhost:8085

在 routing 配置对象里找不到对应的值:

因此使用默认的 appRoute.

被重定向到 5000 端口:

因为 5000 端口并没有服务在监听:

因此,修改 proxy.js 里的配置。

在 appRoute 里,将 target 指向真实的 SAP UI5 服务器运行地址:


然后通过代理服务器访问整个应用。这样,8080 端口就被隐藏掉,起作用的是代理服务器监听的 8085 端口。

Chrome 开发者工具 network 里观察到的全是 8085 端口:

odata.json 文件里添加一条名为 sap 的配置:

{
    "sap": { 
        "target": "http://10.0.xx.xx"
    }
}

这样如果我在地址栏里输入:

http://localhost:8085/sap/

根据这个正则表达式:

var dirname = req.url.replace(/^\/([^\/]*).*$/, '$1');

会自动将 url 里 8085 后出现的一对 // 里的 sap 提取出来。

然后执行:

var route = routing[dirname]  || appRoute;

从 odata.json 的配置里,提取新的路由信息:

从上图可以看出,凡是发送到 http://localhost:8085/sap/ 的请求,会被重定向到 10.0.xx.xx/sap 了。


当一个请求被代理时,它遵循两个不同的管道,它们将转换应用于 req 和 res 对象。 第一个管道(传入)负责创建和操作将客户端连接到目标的流。 第二个管道(传出)负责创建和操作从目标向客户端返回数据的流。


相关文章
|
2月前
|
JavaScript 前端开发 小程序
Vue 3的高颜值UI组件库
Vue 3的高颜值UI组件库
114 1
|
2月前
|
C# 开发者 Windows
基于Material Design风格开源、易用、强大的WPF UI控件库
基于Material Design风格开源、易用、强大的WPF UI控件库
173 0
|
2月前
|
前端开发 搜索推荐 开发者
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
|
2月前
|
JavaScript 前端开发 开发者
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
|
2月前
|
Web App开发 数据采集 前端开发
纯技术讨论:如何让 SAP UI5 应用无法被别人在浏览器里调试 - 这种做法不推荐试读版
纯技术讨论:如何让 SAP UI5 应用无法被别人在浏览器里调试 - 这种做法不推荐试读版
|
2月前
|
存储 安全 测试技术
使用 Visual Studio Code 创建 SAP UI5 项目遇到 self-signed security certificate 相关问题
使用 Visual Studio Code 创建 SAP UI5 项目遇到 self-signed security certificate 相关问题
|
1月前
|
开发框架 JavaScript 前端开发
微软官方开源免费的Blazor UI组件库 - Fluent UI Blazor
微软官方开源免费的Blazor UI组件库 - Fluent UI Blazor
|
1月前
|
API Apache C#
推荐2款开源、美观的WinForm UI控件库
推荐2款开源、美观的WinForm UI控件库
|
2月前
Vue3+Vite+Pinia+Naive后台管理系统搭建之四:Naive UI 组件库的安装和使用
Vue3+Vite+Pinia+Naive后台管理系统搭建之四:Naive UI 组件库的安装和使用
59 1
什么是 SAP ABAP 里的 Subscreen
什么是 SAP ABAP 里的 Subscreen
什么是 SAP ABAP 里的 Subscreen