fix(admin-ui): Admin UI: Invalid Request Header (#5548)

**What** Fix of #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 <[email protected]>
medusajs · Nov 9, 2023 · b4e8adf · b4e8adf
1 parent 91615f9
commit b4e8adf
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 0 deletions.
diff --git a/.changeset/witty-tools-matter.md 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,
       },
     }
   }