fix(@angular-devkit/build-angular): correctly respond to preflight re…

…quests

With this commit, we add a middleware that handles preflight requests as currently responses for this type of requests returning 404.

This is a temporary workaround until this issue is fixed upstream. See: webpack/webpack-dev-server#4180

Closes #23639

(cherry picked from commit b4a1b0f)

packages/angular_devkit/build_angular/src/webpack/configs/dev-server.ts

@@ -11,7 +11,12 @@ import { existsSync, promises as fsPromises } from 'fs';
 import { extname, posix, resolve } from 'path';
 import { URL, pathToFileURL } from 'url';
 import { Configuration, RuleSetRule } from 'webpack';
-import { Configuration as DevServerConfiguration } from 'webpack-dev-server';
+import type {
+  Configuration as DevServerConfiguration,
+  NextFunction,
+  Request,
+  Response,
+} from 'webpack-dev-server';
 import { WebpackConfigOptions, WebpackDevServerOptions } from '../../utils/build-options';
 import { assertIsError } from '../../utils/error';
 import { loadEsmModule } from '../../utils/load-esm';
@@ -87,6 +92,26 @@ export async function getDevServerConfig(
         publicPath: servePath,
         stats: false,
       },
+      setupMiddlewares: (middlewares, _devServer) => {
+        // Temporary workaround for https://github.com/webpack/webpack-dev-server/issues/4180
+        middlewares.push({
+          name: 'options-request-response',
+          path: '*',
+          middleware: (req: Request, res: Response, next: NextFunction) => {
+            if (req.method === 'OPTIONS') {
+              res.statusCode = 204;
+              res.setHeader('Content-Length', 0);
+              res.end();
+
+              return;
+            }
+
+            next();
+          },
+        });
+
+        return middlewares;
+      },
       liveReload,
       hot: hmr && !liveReload ? 'only' : hmr,
       proxy: await addProxyConfig(root, proxyConfig),

tests/legacy-cli/e2e/tests/commands/serve/preflight-request.ts

@@ -0,0 +1,15 @@
+import fetch from 'node-fetch';
+import { ngServe } from '../../../utils/project';
+
+export default async function () {
+  const port = await ngServe();
+  const { size, status } = await fetch(`http://localhost:${port}/main.js`, { method: 'OPTIONS' });
+
+  if (size !== 0) {
+    throw new Error(`Expected "size" to be "0" but got "${size}".`);
+  }
+
+  if (status !== 204) {
+    throw new Error(`Expected "status" to be "204" but got "${status}".`);
+  }
+}