CORS pre-flight requests return HTTP 404 on assets served by dev-server #23639
Description
🐞 Bug report
Command (mark with an x)
- new
- build
- serve
- test
- e2e
- generate
- add
- update
- lint
- extract-i18n
- run
- config
- help
- version
- doc
Is this a regression?
Yes, it seem to have been introduced after Angular 12, as I was able to reproduce it in Angular 14 and others have encountered the problem in Angular 13.
Description
When using the standard dev-server, CORS pre-flight requests for assets fail.
This is usually not an issue since most of the time your app and assets are served from the same origin (thus there are no CORS pre-flight requests) but I work with single-spa where my app run on a origin (for example: my-single-spa.app) while my dev server is running on a different origin (localhost:4202), which is frequent when developing web apps using single-spa.
🔬 Minimal Reproduction
I created a simple Angular 14 app that request a JSON file using HttpClient and served using the ng serve --port 4202 [--disable-host-check] command.
Then when opening the app in the browser, the json is successfully loaded as there are no CORS at play since, as I said earlier, the app and the assets are served from the same origin.
But if you do an OPTIONS request like a browser would do for preflight CORS requests, the dev server returns an HTTP 404:
curl -i -X OPTIONS http://localhost:4202/assets/example.json
HTTP/1.1 404 Not Found
X-Powered-By: Express
Access-Control-Allow-Origin: *
Content-Security-Policy: default-src 'none'
X-Content-Type-Options: nosniff
Content-Type: text/html; charset=utf-8
Content-Length: 162
Date: Tue, 26 Jul 2022 19:44:00 GMT
Connection: keep-alive
Keep-Alive: timeout=5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Error</title>
</head>
<body>
<pre>Cannot OPTIONS /assets/example.json</pre>
</body>
</html>
Note that it also fails if you add Origin: http://localhost:4202 as a header or if you add the --disable-host-check flag to ng serve.
If you just GET the file, it exists:
curl -i -X GET http://localhost:4202/assets/example.jsonHTTP/1.1 200 OK
X-Powered-By: Express
Access-Control-Allow-Headers: *
Content-Type: application/json; charset=utf-8
Accept-Ranges: bytes
Content-Length: 19
ETag: W/"13-7Z9Z8HHLJ7/p09MifQGtauXsqqQ"
Date: Tue, 26 Jul 2022 13:21:08 GMT
Connection: keep-alive
Keep-Alive: timeout=5
{
"foo": "bar"
}
You can find a sample project to reproduce the issue here. The branch is standard-webpack, please discard main and no-custom as I previously thought the issue lied in just-jeb/angular-builders.
🌍 Your Environment
Angular CLI: 14.1.0
Node: 14.17.0
Package Manager: yarn 1.22.5
OS: linux x64
Angular: 14.1.0
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1401.0
@angular-devkit/build-angular 14.1.0
@angular-devkit/core 14.1.0
@angular-devkit/schematics 14.1.0
@schematics/angular 14.1.0
rxjs 7.5.6
typescript 4.7.4