service-worker(safari): POST requests getting blocked with 504 by Service Worker

🐞 bug report

Affected Package

@angular/service-worker

Is this a regression?

I don’t know if this has even worked properly in Safari, but it’s supposed to be production ready.

Description

Service Workers shouldn’t block POST requests AFAIK, but that’s happening on Safari Version 13.1 (15609.1.20.111.8) on macOS Catalina 10.15.4 (19E287).

🔬 Minimal Reproduction

• Go to https://angular.io/ in Safari on macOS
• Open your Dev tools Console
• Browse around to some different pages like resources, guides, events, etc
• Observe the following error in the console

https://www.google-analytics.com/j/collect?v=1&_v=j82&a=557396380&t=pageview&_s=1&dl=https%3A%2F%2Fangular.io%2Fresources%3Fcategory%3Ddevelopment&dp=%2Fresources&ul=en&de=UTF-8&dt=Angular&sd=24-bit&sr=1920x1080&vp=1914x532&je=1&_u=QACAAEABAAAAAC~&jid=43561559&gjid=590323957&cid=498157216.1589533208&tid=UA-8594346-15&_gid=406270144.1589533208&_r=1&z=73615628
Failed to load resource: the server responded with a status of 504 (Gateway Timeout)

🔥 Exception or Error

Cannot use wildcard in Access-Control-Allow-Origin when credentials flag is true., undefined

NGSW Debug Info:

Driver state: NORMAL ((nominal))
Latest manifest hash: a51465926eaa708ba14e763b3c654f2dc464f776
Last update check: 1m3s560u

=== Version a51465926eaa708ba14e763b3c654f2dc464f776 ===

Clients: 1692-8, 1692-33, 1692-59, 1692-63, 1692-70

=== Idle Task Queue ===
Last update tick: 28s363u
Last update run: 1m3s868u
Task queue:


Debug log:

[1m31s277u] TypeError(Cannot use wildcard in Access-Control-Allow-Origin when credentials flag is true., undefined) Driver.fetch(https://www.google-analytics.com/j/collect?v=1&_v=j82&a=1196111008&t=pageview&_s=1&dl=https%3A%2F%2Fangular.io%2Fguide%2Fservice-worker-communications&dp=%2Fguide%2Fservice-worker-communications&ul=en&de=UTF-8&dt=Angular&sd=24-bit&sr=1920x1080&vp=1914x532&je=1&_u=QACAAEABAAAAAC~&jid=323136214&gjid=1958337307&cid=498157216.1589533208&tid=UA-8594346-15&_gid=406270144.1589533208&_r=1&z=559832955)
[28s598u] TypeError(Cannot use wildcard in Access-Control-Allow-Origin when credentials flag is true., undefined) Driver.fetch(https://www.google-analytics.com/j/collect?v=1&_v=j82&a=1715609439&t=pageview&_s=5&dl=https%3A%2F%2Fangular.io%2Fguide%2Faccessibility&dp=%2Fresources&ul=en&de=UTF-8&dt=Angular%20-%20EVENTS&sd=24-bit&sr=1920x1080&vp=1914x532&je=1&_u=SACAAEABAAAAAC~&jid=721523635&gjid=563131875&cid=498157216.1589533208&tid=UA-8594346-15&_gid=406270144.1589533208&_r=1&z=882809832)
...
[3m52s] TypeError(Cannot use wildcard in Access-Control-Allow-Origin when credentials flag is true., undefined) Driver.fetch(https://www.google-analytics.com/j/collect?v=1&_v=j82&a=1121528947&t=pageview&_s=1&dl=https%3A%2F%2Fangular.io%2Fresources%3Fcategory%3Ddevelopment&dp=%2Fresources&ul=en&de=UTF-8&dt=Angular&sd=24-bit&sr=1920x1080&vp=1914x523&je=1&_u=QACAAEABAAAAAC~&jid=1658082190&gjid=2097738465&cid=498157216.1589533208&tid=UA-8594346-15&_gid=406270144.1589533208&_r=1&z=747985136)
[52s802u] TypeError(Cannot use wildcard in Access-Control-Allow-Origin when credentials flag is true., undefined) Driver.fetch(https://www.google-analytics.com/j/collect?v=1&_v=j82&a=1121528947&t=pageview&_s=3&dl=https%3A%2F%2Fangular.io%2Fresources%3Fcategory%3Ddevelopment&dp=%2Ffeatures&ul=en&de=UTF-8&dt=Angular%20-%20Angular%20Contributors&sd=24-bit&sr=1920x1080&vp=1914x523&je=1&_u=SACAAEABAAAAAC~&jid=2000655573&gjid=1284227509&cid=498157216.1589533208&tid=UA-8594346-15&_gid=406270144.1589533208&_r=1&z=1228242795)

🌍 Your Environment

Angular Version: 10.0.0-next.5

Anything else relevant? I’m also seeing this on my site when using LogRocket (another kind of analytics service), but the Headers it complains about are different:

Request header field Pragma is not allowed by Access-Control-Allow-Headers., undefined

NGSW Debug Info:

Driver state: EXISTING_CLIENTS_ONLY (Degraded due to failed initialization: Internal error
undefined)
Latest manifest hash: 5642c5e828814d3dae722eae1783dc4724682328
Last update check: 4s519u

=== Version 5642c5e828814d3dae722eae1783dc4724682328 ===

Clients: 779-37

=== Idle Task Queue ===
Last update tick: 3s197u
Last update run: 46s658u
Task queue:
 * check-updates-on-navigation

Debug log:
[5m51s257u] TypeError(Request header field Pragma is not allowed by Access-Control-Allow-Headers., undefined) Driver.fetch(https://r.lr-ingest.io/i?a=buymic%2Fdevintent-website&r=4-e8456afb-9941-460d-a17c-fddff8c6183e&t=e8d3692a-bb84-48ad-8f91-7dd31c74115c&ir=f&ht=f&s=0)
[5m48s165u] TypeError(Request header field Pragma is not allowed by Access-Control-Allow-Headers., undefined) Driver.fetch(https://r.lr-ingest.io/i?a=buymic%2Fdevintent-website&r=4-e8456afb-9941-460d-a17c-fddff8c6183e&t=e8d3692a-bb84-48ad-8f91-7dd31c74115c&ir=f&ht=f&s=0)

[kosso]

I am also getting random 504 errors on some HTTP Client API GET requests, only on Safari.

I never thought it might be the Service Worker…

Will attempt to add the ngsw-bypass header (or as a query param) in my HTTP request interceptor.

Update: : Adding ngsw-bypass=true to the HTTPRequest.params in an interceptor seems to have got rid of my random 504 errors.

Note: In the Safari Dev Console the erroneous requests were showing as related to the Service Worker.

[gkalpak]

This needs further investigation. Note that it might be related to the SW’s stripping off request headers (see #24227 for more info).