Change Origin header on proxied WebSocket requests

Similar to CORS controls, WebSocket servers are often (see below)
configured to check the Origin header of incoming requests. The config
for the HTTP proxy overwrites requests' Origin header to prevent issues
with CORS, but didn't previously do the same thing for WebSockets, as
they are controlled by a different config key.

Fixes #10878

Author: treuherz

packages/react-dev-utils/WebpackDevServerUtils.js

@@ -379,6 +379,15 @@ function prepareProxy(proxy, appPublicFolder, servedPathname) {
           proxyReq.setHeader('origin', target);
         }
       },
+      onProxyReqWs: proxyReq => {
+        // Browsers may send Origin headers even with same-origin
+        // requests. It is common for WebSocket servers to check the Origin
+        // header, so we have to change the Origin to match
+        // the target URL.
+        if (proxyReq.getHeader('origin')) {
+          proxyReq.setHeader('origin', target);
+        }
+      },
       onError: onProxyError(target),
       secure: false,
       changeOrigin: true,