Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

CORS pre-flight requests return HTTP 404 on assets served by dev-server #23639

Closed
1 of 15 tasks
axeleroy opened this issue Jul 26, 2022 · 2 comments · Fixed by #23642
Closed
1 of 15 tasks

CORS pre-flight requests return HTTP 404 on assets served by dev-server #23639

axeleroy opened this issue Jul 26, 2022 · 2 comments · Fixed by #23642
Labels
area: @angular-devkit/build-angular devkit/build-angular:dev-server freq1: low Only reported by a handful of users who observe it rarely severity5: regression type: bug/fix

Comments

@axeleroy
Copy link

axeleroy commented Jul 26, 2022 •
edited
Loading

🐞 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
@axeleroy axeleroy mentioned this issue Jul 26, 2022
Open
@alan-agius4
Copy link
Collaborator

alan-agius4 commented Jul 27, 2022 •
edited
Loading

This appears to be a defect in webpack-dev-server.

See webpack/webpack-dev-server#4180

alan-agius4 added a commit to alan-agius4/angular-cli that referenced this issue Jul 27, 2022
@alan-agius4
fix(@angular-devkit/build-angular): correctly respond to preflight re…
70a3517 
…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 angular#23639
@alan-agius4 alan-agius4 mentioned this issue Jul 27, 2022
Merged
alan-agius4 added a commit to alan-agius4/angular-cli that referenced this issue Jul 27, 2022
@alan-agius4
fix(@angular-devkit/build-angular): correctly respond to preflight re…
b9548f1 
…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 angular#23639
alan-agius4 added a commit to alan-agius4/angular-cli that referenced this issue Aug 2, 2022
@alan-agius4
fix(@angular-devkit/build-angular): correctly respond to preflight re…
732c9df 
…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 angular#23639
dgp1130 pushed a commit that referenced this issue Aug 2, 2022
@alan-agius4 @dgp1130
fix(@angular-devkit/build-angular): correctly respond to preflight re…
b4a1b0f 
…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
dgp1130 pushed a commit that referenced this issue Aug 2, 2022
@alan-agius4 @dgp1130
fix(@angular-devkit/build-angular): correctly respond to preflight re…
c984710 
…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)
@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 2, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
area: @angular-devkit/build-angular devkit/build-angular:dev-server freq1: low Only reported by a handful of users who observe it rarely severity5: regression type: bug/fix
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(@angular-devkit/build-angular): correctly respond to preflight requests alan-agius4/angular-cli
2 participants
@axeleroy @alan-agius4