From b4e8adfcf9c71f97a2a0b4ad8f0632e213fe7123 Mon Sep 17 00:00:00 2001
From: Rick Lam <114425681+rick-lam@users.noreply.github.com>
Date: Thu, 9 Nov 2023 12:32:27 +0000
Subject: [PATCH] fix(admin-ui): Admin UI: Invalid Request Header (#5548)

**What**
Fix of https://github.com/medusajs/medusa/issues/4904

**Fixes**
Admin run development server with hostname shown Invalid Request Header

**How**
Added webpack-dev-server config [allowedHosts](https://webpack.js.org/configuration/dev-server/#devserverallowedhosts) and [webSocketUrl](https://webpack.js.org/configuration/dev-server/#websocketurl) in admin develop options to change allowlist services hostname and Web Socket Url

**Testing**
Edit medusa-config.js with hostname in admin plugin develop options
```
const plugins = [
  // ...
  {
    resolve: "@medusajs/admin",
    /** @type {import('@medusajs/admin').PluginOptions} */
    options: {
      develop: {
        allowedHosts: [
          'host.com',
          'subdomain.host.com',
          'subdomain2.host.com',
          'host2.com',
        ],
        webSocketURL: 'wss://host.com/ws'
      },
    },
  },
]
```


Co-authored-by: Oli Juhl <59018053+olivermrbl@users.noreply.github.com>
---
 .changeset/witty-tools-matter.md              |  6 ++++++
 packages/admin-ui/src/node/actions/develop.ts |  3 +++
 packages/admin-ui/src/node/types.ts           | 18 ++++++++++++++++++
 packages/admin-ui/webpack.config.dev.ts       |  1 +
 packages/admin/src/commands/develop.ts        |  2 ++
 packages/admin/src/utils/load-config.ts       |  3 +++
 6 files changed, 33 insertions(+)
 create mode 100644 .changeset/witty-tools-matter.md

diff --git a/.changeset/witty-tools-matter.md b/.changeset/witty-tools-matter.md
new file mode 100644
index 0000000000..2d0a5e3f3d
--- /dev/null
+++ b/.changeset/witty-tools-matter.md
@@ -0,0 +1,6 @@
+---
+"@medusajs/admin-ui": patch
+"@medusajs/admin": patch
+---
+
+fix(admin-ui): Admin UI: Invalid Request Header
diff --git a/packages/admin-ui/src/node/actions/develop.ts b/packages/admin-ui/src/node/actions/develop.ts
index ea7418deed..391ff98901 100644
--- a/packages/admin-ui/src/node/actions/develop.ts
+++ b/packages/admin-ui/src/node/actions/develop.ts
@@ -25,6 +25,7 @@ export async function develop({
       port: 7001,
       logLevel: "error",
       stats: "normal",
+      allowedHosts: 'auto',
     },
   },
 }: DevelopArgs) {
@@ -59,6 +60,7 @@ export async function develop({
         errors: true,
         warnings: false,
       },
+      webSocketURL: options.develop.webSocketURL ? options.develop.webSocketURL : `ws://localhost:${options.develop.port}/ws`,
     },
     open: false,
     onListening: options.develop.open
@@ -83,6 +85,7 @@ export async function develop({
       disableDotRule: true,
     },
     hot: true,
+    allowedHosts: options.develop.allowedHosts ? options.develop.allowedHosts : 'auto',
   }
 
   const server = new WebpackDevDerver(devServerArgs, compiler)
diff --git a/packages/admin-ui/src/node/types.ts b/packages/admin-ui/src/node/types.ts
index 3697b5a99c..b090398b0a 100644
--- a/packages/admin-ui/src/node/types.ts
+++ b/packages/admin-ui/src/node/types.ts
@@ -1,5 +1,14 @@
 import type { Configuration } from "webpack"
 
+type WebSocketURL = {
+  hostname?: string | undefined
+  password?: string | undefined
+  pathname?: string | undefined
+  port?: string | number | undefined
+  protocol?: string | undefined
+  username?: string | undefined
+}
+
 export type DevelopOptions = {
   /**
    * Determines whether the development server should open the admin dashboard
@@ -23,6 +32,15 @@ export type DevelopOptions = {
    * @default "normal"
    */
   stats?: "normal" | "debug"
+  /**
+   * The development server allowed hosts.
+   * @default "auto"
+   */
+  allowedHosts?: "auto" | "all" | string[]
+  /**
+   * Specifying URL to web socket server
+   */
+  webSocketURL?: string | WebSocketURL |undefined
 }
 
 export type AdminOptions = {
diff --git a/packages/admin-ui/webpack.config.dev.ts b/packages/admin-ui/webpack.config.dev.ts
index 1ee6da9386..30e9622cc5 100644
--- a/packages/admin-ui/webpack.config.dev.ts
+++ b/packages/admin-ui/webpack.config.dev.ts
@@ -48,6 +48,7 @@ const getDevServerConfig = () => {
         onListening: function () {
           openBrowser(`http://localhost:7001`)
         },
+        allowedHosts: 'auto',
       } as Configuration,
     },
   }
diff --git a/packages/admin/src/commands/develop.ts b/packages/admin/src/commands/develop.ts
index 5ba0f2e26e..ff302de1cb 100644
--- a/packages/admin/src/commands/develop.ts
+++ b/packages/admin/src/commands/develop.ts
@@ -26,6 +26,8 @@ export default async function develop({ backend, path, port }: DevelopArgs) {
       develop: {
         port: port || config.develop.port,
         open: config.develop.open,
+        allowedHosts: config.develop.allowedHosts,
+        webSocketURL: config.develop.webSocketURL,
       },
     },
   })
diff --git a/packages/admin/src/utils/load-config.ts b/packages/admin/src/utils/load-config.ts
index 2824ccd8de..153843e475 100644
--- a/packages/admin/src/utils/load-config.ts
+++ b/packages/admin/src/utils/load-config.ts
@@ -27,6 +27,7 @@ export const loadConfig = (isDev?: boolean): PluginOptions | null => {
     develop: {
       open: true,
       port: 7001,
+      allowedHosts: 'auto',
     },
   }
 
@@ -50,6 +51,8 @@ export const loadConfig = (isDev?: boolean): PluginOptions | null => {
       develop: {
         open: options.develop?.open ?? config.develop.open,
         port: options.develop?.port ?? config.develop.port,
+        allowedHosts: options.develop?.allowedHosts ?? config.develop.allowedHosts,
+        webSocketURL: options.develop?.webSocketURL ?? config.develop.webSocketURL,
       },
     }
   }