Kerberos SSOを使用してホストにcreate-react-app / WebpackDevServerプロキシを使用できますか？

debugcn 投稿 Dev

ジョン・フリードマン

Kerberosシングルサインオンを実装し、HTTPS / WSSを介してRESTとSTOMPの両方のWebSocketを公開するSpring-Bootアプリケーションがあります。ローカル開発用のプロキシを使用してこれを設定する必要があります。

私は以下の両方をに追加しようとしました package.json

"proxy": {
  "/ws": {
    "target": "wss://my.host.name.com:8080",
    "ws": true,
    "ssl": true
  },
  "/api": {
    "target": "https://my.host.name.com:8080",
    "ssl": true
  }
}

＆

"proxy": "https://my.host.name.com:8080"

次に、クライアントコードを変更します。

===================================================================
--- app/src/api/index.ts    (revision 6fcacd98ec61cda85d7dfa7fe5d5f5c12aafbe8a)
+++ app/src/api/index.ts    (date 1540455521933)
@@ -5,7 +5,7 @@
 import Statistics from '../types/Statistics';

 export function submitPricerList(list: ReadonlyArray<PricerCoreInputs | null>): Promise<string> {
-    return fetch('https://my.host.name.com:8080/api/pricer-list', {
+    return fetch('/api/pricer-list', {
         body: JSON.stringify(list),
         credentials: 'include',
         headers: {
@@ -28,7 +28,7 @@
 }

 export function initialSnapshot(): Promise<SnapshotWithChartableCurves | null> {
-    return fetch('https://my.host.name.com:8080/api/initial-snapshot', {
+    return fetch('/api/initial-snapshot', {
         credentials: 'include',
         headers: {
             'Accept': 'application/json'

===================================================================
--- app/src/containers/App.tsx  (revision 6fcacd98ec61cda85d7dfa7fe5d5f5c12aafbe8a)
+++ app/src/containers/App.tsx  (date 1540455521900)
@@ -74,7 +74,7 @@
         super(props);

         const stompClient = new StompJs.Client({
-            brokerURL: `wss://my.host.name.com:8080/ws/gs-guide-websocket`,
+            brokerURL: `wss://${window.location.host}/ws/gs-guide-websocket`,
             debug: (str) => {
                 this.logger.log({level: 'debug', message: str});
             },

単純なプロキシ設定ではHTTPSプロキシが機能し、WSSは機能しませんが、詳細なプロキシ設定ではどちらも機能しません。

開発中にHTTPSとWSSの両方が正しくルーティングされるようにプロキシ設定を構成するにはどうすればよいですか？

ジョン・フリードマン

を使用するsetupProxy.jsスクリプトを使用して、この問題を解決することになりましたhttp-proxy-middleware。

私たちは、その後、行動などを制御するためのいくつかの環境変数を選んだREACT_APP_HOST_NAMEし、REACT_APP_FORCE_PROXY_PROTOCOL結果のコードでこのようなビット：

const proxy = require('http-proxy-middleware');

module.exports = function(app) {
    const developmentHostName = process.env.REACT_APP_HOST_NAME;
    if (process.env.NODE_ENV === 'development' &&  developmentHostName) {
        const protocol = process.env.REACT_APP_FORCE_PROXY_PROTOCOL || 'https';
        const hostName = `${developmentHostName.trim()}.my.domain.com:8080`;
        app.use(
            proxy('/api', {
                target: `${protocol}://${hostName}`,
                secure: false,
                onProxyRes(proxyRes) {
                    // protocolRewrite option is currently only applicable to 301/302/307/308 response codes
                    const locationHeader = proxyRes.headers['location'];
                    if (locationHeader !== undefined) {
                        const protocolEnd = locationHeader.indexOf('://');
                        const locationProtocol = locationHeader.substring(0, protocolEnd);
                        if (locationProtocol !== 'http') {
                            proxyRes.headers['location'] = 'http' + locationHeader.substring(protocolEnd);
                        }
                    }
                }
            })
        );
    }
};

そして、私たちのアプリケーションには、このようなものが少し含まれています

const hostname = window.location.hostname;
const developmentHostName = process.env.REACT_APP_HOST_NAME || hostname;
const hostAndPort = hostname === 'localhost' ? `${developmentHostName.trim()}.my.domain.com:8080` : `${hostname}:${window.location.port}`;
const protocol = process.env.REACT_APP_FORCE_PROXY_PROTOCOL || window.location.protocol;
const wsProtocol = protocol.length > 4 && protocol.substring(0, 5) === 'https' ? 'wss:' : 'ws:';

これは、WebSocket接続がプロキシされていないことを意味しますが、少なくとも機能します

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]