fix(proxy): rewrite the origin header to match the target for ws proxy (#16558)

Co-authored-by: John Hunter <[email protected]>

Author: johnhunter

docs/config/server-options.md

@@ -90,7 +90,7 @@ Configure custom proxy rules for the dev server. Expects an object of `{ key: op
 
 Note that if you are using non-relative [`base`](/config/shared-options.md#base), you must prefix each key with that `base`.
 
-Extends [`http-proxy`](https://github.com/http-party/node-http-proxy#options). Additional options are [here](https://github.com/vitejs/vite/blob/main/packages/vite/src/node/server/middlewares/proxy.ts#L13).
+Extends [`http-proxy`](https://github.com/http-party/node-http-proxy#options). Additional options are [here](https://github.com/vitejs/vite/blob/main/packages/vite/src/node/server/middlewares/proxy.ts#L13). Note that [unlike http-proxy](https://github.com/http-party/node-http-proxy/issues/1669), the `changeOrigin` option will change both host and origin headers to match the target.
 
 In some cases, you might also want to configure the underlying dev server (e.g. to add custom middlewares to the internal [connect](https://github.com/senchalabs/connect) app). In order to do that, you need to write your own [plugin](/guide/using-plugins.html) and use [configureServer](/guide/api-plugin.html#configureserver) function.
 

packages/vite/src/node/server/middlewares/proxy.ts

@@ -29,6 +29,29 @@ export interface ProxyOptions extends HttpProxy.ServerOptions {
   ) => void | null | undefined | false | string
 }
 
+const setOriginHeader = (
+  proxyReq: http.ClientRequest,
+  options: HttpProxy.ServerOptions,
+) => {
+  // Browsers may send Origin headers even with same-origin
+  // requests. It is common for WebSocket servers to check the Origin
+  // header, so if changeOrigin is true we change the Origin to match
+  // the target URL.
+  // https://github.com/http-party/node-http-proxy/issues/1669
+  if (options.changeOrigin) {
+    const { target } = options
+
+    if (proxyReq.getHeader('origin') && target) {
+      const changedOrigin =
+        typeof target === 'object'
+          ? `${target.protocol}//${target.host}`
+          : target
+
+      proxyReq.setHeader('origin', changedOrigin)
+    }
+  }
+}
+
 export function proxyMiddleware(
   httpServer: HttpServer | null,
   options: NonNullable<CommonServerOptions['proxy']>,
@@ -89,7 +112,13 @@ export function proxyMiddleware(
       }
     })
 
+    proxy.on('proxyReq', (proxyReq, req, res, options) => {
+      setOriginHeader(proxyReq, options)
+    })
+
     proxy.on('proxyReqWs', (proxyReq, req, socket, options, head) => {
+      setOriginHeader(proxyReq, options)
+
       socket.on('error', (err) => {
         config.logger.error(
           `${colors.red(`ws proxy socket error:`)}\n${err.stack}`,