原始碼：

```javascript
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 app = express();
app.use(allowCrossDomain);
app.listen(8085);
console.log("Proxy started on http://localhost:8085");
```

routing JSON 物件解析出來的結果：
![](https://img-blog.csdnimg.cn/img_convert/f9b809d0f298a6d2f5e18fcc320b1dea.png)

app.use(allowCrossDomain);

設定路由器，對路徑 `/`，使用傳入的 allowCrossDomain 函式：
![](https://img-blog.csdnimg.cn/img_convert/3a7c7119dd60e8a0a15daff4c912dfd3.png)

![](https://img-blog.csdnimg.cn/img_convert/7ac939bf2bb28c4fcd4b0dc8a8bdbc2c.png)

然後監聽在 8085 埠上。

我在另一個瀏覽器視窗，訪問 localhost:8085

![](https://img-blog.csdnimg.cn/img_convert/8b3b5b2e8aeb4d087393f5a8b7df9333.png)

在 routing 配置物件裡找不到對應的值：
![](https://img-blog.csdnimg.cn/img_convert/59c421e1467a9d0d59ae3b37b420d147.png)

因此使用預設的 appRoute.

被重定向到 5000 埠：
![](https://img-blog.csdnimg.cn/img_convert/e957cdb30e0397090143f47e4d82f724.png)

![](https://img-blog.csdnimg.cn/img_convert/db3d4e4d68328aeec721565bc0c8de7e.png)

因為 5000 埠並沒有服務在監聽：

![](https://img-blog.csdnimg.cn/img_convert/c02ba9532420de1d5a5b41b5f5c9f7ce.png)

![](https://img-blog.csdnimg.cn/img_convert/88c6f18f07cc509267122d1bd490f001.png)

因此，修改 proxy.js 裡的配置。

在 appRoute 裡，將 target 指向真實的 SAP UI5 伺服器執行地址：

![](https://img-blog.csdnimg.cn/img_convert/d6f8e9e78ce20061539340a8d2f20275.png)

然後透過代理伺服器訪問整個應用。這樣，8080 埠就被隱藏掉，起作用的是代理伺服器監聽的 8085 埠。

Chrome 開發者工具 network 裡觀察到的全是 8085 埠：
![](https://img-blog.csdnimg.cn/img_convert/06300882ffc83cae714b215cc57b0057.png)

odata.json 檔案裡新增一條名為 sap 的配置：

```json
{
    "sap": { 
        "target": "http://10.0.xx.xx"
    }
}
```
![](https://img-blog.csdnimg.cn/img_convert/309d15b7c2d063e46d7a1e09b46d258e.png)

這樣如果我在位址列裡輸入：

http://localhost:8085/sap/

根據這個正規表示式：

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

會自動將 url 裡 8085 後出現的一對 `//` 裡的 sap 提取出來。

然後執行：

```javascript
var route = routing[dirname]  || appRoute;
```
從 odata.json 的配置裡，提取新的路由資訊：

![](https://img-blog.csdnimg.cn/img_convert/4eef0182770651f965f232464cf5863d.png)

從上圖可以看出，凡是傳送到 http://localhost:8085/sap/ 的請求，會被重定向到 10.0.xx.xx/sap 了。

當一個請求被代理時，它遵循兩個不同的管道，它們將轉換應用於 req 和 res 物件。 第一個管道（傳入）負責建立和操作將客戶端連線到目標的流。 第二個管道（傳出）負責建立和操作從目標向客戶端返回資料的流。

SAP UI5 架設在 http-proxy 庫上的單步除錯

相關文章