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

Question

我有一个 spring-boot 应用程序，它实现了 Kerberos 单点登录并通过 HTTPS/WSS 公开了 REST 和 STOMP websockets。我需要为本地开发设置一个代理。

我已尝试将以下内容添加到 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？

Answer 1

我们最终使用 setupProxy.js script which makes use of 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 连接没有被代理，但它们至少可以工作

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

Can create-react-app / WebpackDevServer proxy to a host using Kerberos SSO?

kerberos

node.js

webpack-dev-server

create-react-app