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

@@ -0,0 +1,6 @@
+---
+"@medusajs/admin-ui": patch
+"@medusajs/admin": patch
+---
+
+fix(admin-ui): Admin UI: Invalid Request Header

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)

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 = {

packages/admin-ui/webpack.config.dev.ts

@@ -48,6 +48,7 @@ const getDevServerConfig = () => {
         onListening: function () {
           openBrowser(`http://localhost:7001`)
         },
+        allowedHosts: 'auto',
       } as Configuration,
     },
   }

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,
       },
     },
   })

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,
       },
     }
   }