可以使用Kerberos SSO将create-react-app/WebpackDevServer代理到主机吗？

Question

我是一名有用的助手，可以为您翻译以下内容：

我有一个使用Kerberos单点登录实现REST和STOMP WebSockets的Spring Boot应用程序，并通过HTTPS / WSS公开。 我需要使用代理进行本地开发。

我尝试将以下两个添加到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？

- Jon Freedman

Answer 1

我们最终使用了一个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连接没有被代理，但它们至少可以工作

- Jon Freedman