前不久，SAP 釋出了新 UI5 工具的官方生產版本。 這當然是 UI5con 上的一個大話題，有幾個關於它的會議。對於使用 Visual Studio Code 進行 SAP UI5 本地開發的從業者來說，這個版本里一個非常有用的功能，就是對於 CORS 問題提供的解決方案：代理伺服器。

關於 SAP UI5 CORS 問題目前有兩種解決方案：

- 代理伺服器將您的應用程式的請求轉發到 UI5 伺服器，後者再轉發到您的後端伺服器
- UI5 CLI 伺服器代理擴充套件：新工具允許開發人員擴充套件伺服器中介軟體，從而可以攔截來自客戶端的請求並將 OData 請求重定向到後端。

在 OpenSAP 課程中，SAP 使用了 npm 模組 [CORS](https://www.npmjs.com/package/cors-anywhere)。

這個 CORS npm 模組有兩個侷限性：

- 使用代理時需要更改應用程式 manifest.json 中的路徑。 這意味著開發人員始終需要在部署到系統之前對其進行更改，或者在 CI 設定中進行更改。
- 我在透過身份驗證呼叫服務時遇到了一些困難，還沒找到解決問題的辦法。

我們首先嚐試 proxy 解決方案。

此選項將使用 express 來部署代理伺服器。 它需要兩個 Node.js 模組：

- http-proxy
- express

在 package.json 中將這些模組定義為 devDependencies 並執行 `npm install` 來使用它們。

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

新增一個 `node proxy.js` 的啟動命令列。

在專案的根目錄建立一個 `proxy.js` 檔案：

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

程式碼關鍵點：

- 載入所有需要的 npm modules
- 啟動 proxy
- 如果 UI5 應用程式正在執行，則定義到主機的路由
- 從另一個配置檔案 odata.json 載入到後端服務的路由
- 攔截來自託管代理的所有請求並將其轉發到正確的路由。如果匹配請求 url 的模式，它將使用配置檔案中的路由，否則它將使用預設的應用程式主機。

完整程式碼如下：

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

odata.json 的內容：

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

使用 ui5 serve 啟動 SAP UI5 應用：
![](https://img-blog.csdnimg.cn/img_convert/d794dcbad88f06193db3b738ff5a4dc4.png)

然後再使用命令列 `Npm run proxy` 啟動代理伺服器：

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

最後的效果：
![](https://img-blog.csdnimg.cn/img_convert/81cf6db88f7fd0913ff0eb41aecc35d2.png)

SAP UI5 本地開發如何透過 http-proxy 解決跨域問題

相關文章