diff --git a/packages/angular_devkit/build_angular/src/webpack/configs/dev-server.ts b/packages/angular_devkit/build_angular/src/webpack/configs/dev-server.ts index d70a6d8e4023..9135bd2aa9c4 100644 --- a/packages/angular_devkit/build_angular/src/webpack/configs/dev-server.ts +++ b/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), diff --git a/tests/legacy-cli/e2e/tests/commands/serve/preflight-request.ts b/tests/legacy-cli/e2e/tests/commands/serve/preflight-request.ts new file mode 100644 index 000000000000..f12402e31199 --- /dev/null +++ b/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}".`); + } +}