From 14d1879ccd5d70c9b2cbe658dead201b60983b7a Mon Sep 17 00:00:00 2001
From: Scott Lamb <slamb@slamb.org>
Date: Sun, 17 Dec 2023 15:57:52 -0800
Subject: [PATCH] fix #290

---
 ui/src/setupProxy.js | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/ui/src/setupProxy.js b/ui/src/setupProxy.js
index d1742e5..12b4f48 100644
--- a/ui/src/setupProxy.js
+++ b/ui/src/setupProxy.js
@@ -6,6 +6,8 @@
 
 const { createProxyMiddleware } = require("http-proxy-middleware");
 
+const target = process.env.PROXY_TARGET || "http://localhost:8080/";
+
 module.exports = (app) => {
   app.use(
     "/api",
@@ -13,7 +15,7 @@ module.exports = (app) => {
     // Note: the `/api` here seems redundant with that above, but without it, the
     // `ws: true` here appears to break react-script's automatic websocket reloading.
     createProxyMiddleware("/api", {
-      target: process.env.PROXY_TARGET || "http://localhost:8080/",
+      target,
       ws: true,
 
       // XXX: this doesn't appear to work for websocket requests. See
@@ -38,6 +40,13 @@ module.exports = (app) => {
           });
         }
       },
+
+      // The `changeOrigin` above doesn't appear to apply to WebSocket requests.
+      // This has a similar effect.
+      // <https://github.com/scottlamb/moonfire-nvr/issues/290>
+      onProxyReqWs: (proxyReq, req, socket, options, head) => {
+        proxyReq.setHeader("origin", target);
+      },
     })
   );
 };