「ルーティング」の領域は複数あり、それぞれ所管が異なる。
①認証依頼先のルーティング
②画面やAPIの対応関係
③-a) 通信先のルーティング:アプリケーションのroot URL 以降
③-b) 通信先のルーティング:「URLの、ドメイン部分」
①認証依頼先のルーティング:Destinationの管轄
②画面やAPIの対応関係:CDS のアノテーションの管轄 or xs-app.jsonの所管
(他の方法もあるが、SAP-BTPの強みであるためこの方法が採られる)
③-a) 通信先:アプリケーションのroot URL 以降:xs-app.jsonの所管。
(正規表現で該当したものを、特定の資材にルーティングする)
③-b) 通信先:「URLの、ドメイン部分」:Destinationの管轄
◆よくあるエラー
https://fiori-app.com → FIORIアプリをホストしているオリジン
https://bpa-api.com → BPAのAPIのオリジン
⇒ CORS問題が起きる。
◆解決方法(概要)
xs-app.json のルーティング設定で解決させる。
◆解決方法(詳細)、および、メカニズム
◆App Routerを使用することで「同じオリジンからの通信」にする
App Routerが、FIORIアプリのリクエストを中継し、
xs-app.json のルーティング設定に基づいてDestinationへ転送する。
FIORIアプリ → App Router (同じオリジン) → Destination (BPAのAPI)
ブラウザはApp Routerとの通信しか認識しないため、
「BPAとFIORIが同じオリジンか?」という問題は解消される。
◆JavaScriptからのHTTP通信
パターン①:絶対パス(URLのフルパス) を指定
パターン②:相対パス(FioriのROOTからの相対パス) を指定
で「②」にする必要がある。
xs-app.jsonの設定(※Destinationを取りたい)
②相対パスなら、
xs-app.json「source」の設定の正規表現にマッチするかどうかで、
Destinationの設定をリダイレクト先のROOTとして、「target」の相対パスに、
通信が置き換わるが、
①絶対パスなら、正規表現のマッチが行なわれないため、
通信を置き換えられない。
(もし①絶対パスで通信するなら、
CORS対応したリクエスト方法にする必要がある)
◆通信を置き換えるための設定例
◆JavaScript側(HTTP通信) ※fetchではなくて、.$ajaxでもよいが前者推奨
fetch("/api/v1/trigger"); // App Routerへの相対パス
◆正規表現マッチング(xs-app.json)
"routes": [
{
"source": "^/api/(.*)$",
"destination": "bpa_api",
"csrfProtection": false
}
]