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

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

Author: alan-agius4

packages/angular_devkit/build_angular/src/builders/dev-server/tests/behavior/serve-preflight-request_spec.ts

@@ -0,0 +1,41 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import { serveWebpackBrowser } from '../../index';
+import { executeOnceAndFetch } from '../execute-fetch';
+import {
+  BASE_OPTIONS,
+  DEV_SERVER_BUILDER_INFO,
+  describeBuilder,
+  setupBrowserTarget,
+} from '../setup';
+
+describeBuilder(serveWebpackBrowser, DEV_SERVER_BUILDER_INFO, (harness) => {
+  describe('Behavior: "Preflight (OPTIONS) request"', () => {
+    beforeEach(async () => {
+      setupBrowserTarget(harness);
+
+      // Application code is not needed for these tests
+      await harness.writeFile('src/main.ts', '');
+    });
+
+    it('responds with correct status and content-length', async () => {
+      harness.useTarget('serve', {
+        ...BASE_OPTIONS,
+      });
+
+      const { result, response } = await executeOnceAndFetch(harness, '/', {
+        request: { method: 'OPTIONS' },
+      });
+
+      expect(result?.success).toBeTrue();
+      expect(response?.status).toBe(204);
+      expect(response?.size).toBe(0);
+    });
+  });
+});

packages/angular_devkit/build_angular/src/builders/dev-server/tests/options/disable-host-check_spec.ts

@@ -42,7 +42,7 @@ describeBuilder(serveWebpackBrowser, DEV_SERVER_BUILDER_INFO, (harness) => {
     it('does not allow an invalid host when option is false', async () => {
       harness.useTarget('serve', {
         ...BASE_OPTIONS,
-        disableHostCheck: false,
+        disableHostCheck: true,
       });
 
       const { result, response } = await executeOnceAndFetch(harness, '/', {

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