Repository: angular
Issue: service-worker(safari): POST requests getting blocked with 504 by Service Worker
Labels: help wanted,area: service-worker,browser: safari,state: needs more investigation,P3

# 🐞 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
```

<pre><code>
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)
</code></pre>

![Screen Shot 2020-05-15 at 05 28 50](https://user-images.githubusercontent.com/3506071/82035040-02c09a80-966d-11ea-9072-835431996a37.png)

![Screen Shot 2020-05-15 at 05 12 17](https://user-images.githubusercontent.com/3506071/82033899-6649c880-966b-11ea-9ffd-b434a272bd48.png)


## 🌍  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:

```ts
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)
```
![Screen Shot 2020-05-15 at 05 19 27](https://user-images.githubusercontent.com/3506071/82034087-b58ff900-966b-11ea-9119-c9186bcd428c.png)
![Screen Shot 2020-05-15 at 05 21 06](https://user-images.githubusercontent.com/3506071/82034225-e8d28800-966b-11ea-858d-8a3c35ffa242.png)
![Screen Shot 2020-05-15 at 05 20 46](https://user-images.githubusercontent.com/3506071/82034230-e96b1e80-966b-11ea-84fe-6ef49684c35d.png)