Repository navigation
Ability to pass options to service worker's fetch request(s). #38907
Description
Versions
Angular CLI: 1.7.3
Node: 8.11.1
OS: darwin x64
Angular: 5.2.9
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router, service-worker
@angular/cdk: 5.2.4
@angular/cli: 1.7.3
@angular/flex-layout: 5.0.0-beta.14
@angular/material: 5.2.4
@angular-devkit/build-optimizer: 0.3.2
@angular-devkit/core: 0.3.2
@angular-devkit/schematics: 0.3.2
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 1.10.2
@schematics/angular: 0.3.2
@schematics/package-update: 0.3.2
typescript: 2.6.2
webpack: 3.11.0
Observed behavior
Our app is located behind a security gateway and is using a service worker. The service worker was integrated following this guide. Because of the fact that any request is passed through the security gateway we had to provide additional options to the construction of any Request object, namely credentials and mode, when a service worker is requesting its manifest from the server. Otherwise manifest fetch fails with CORS error:
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Desired behavior
If I could use the ngsw-config.json file, or some other means of configuration, to set some global options which in return are applied to any fetch request. Like so:
{
"index": "index.html",
"request-options": {
"credentials" : "same-origin",
"mode": "cors"
},
"assetGroups": [
{
"name": "app",
"installMode": "prefetch",
"resources": {
"files": [
"/assets/images/favicon.png",
"/index.html"
],
"versionedFiles": [
"/*.bundle.css",
"/*.bundle.js",
"/*.chunk.js"
]
}
},
{
"name": "assets",
"installMode": "lazy",
"updateMode": "prefetch",
"resources": {
"files": [
"/assets/**"
],
"urls": [
"https://fonts.googleapis.com/**"
]
}
}
]
}
Reacted by Florian Gritsch, mseidl01, pedambr, 4F2E4A2E, Максим Иванов, Rasmus Hansen, Csaba, Mina Lohan, TenTaeTme, Kaushik Gnanaskandan and 14 more
Activity
mina-skunk commentedon Aug 1, 2018
I experienced this twice, strangely it is resolved by longing out and back in to my OS (stopping all chrome processes) with out publishing or any changes to the service worker config.
bjornharvold commentedon Nov 9, 2018
Same issue. Service worker tries to fetch server data without CORS headers: No 'Access-Control-Allow-Origin' header is present on the requested resource. What's the workaround right now?
Jack-Sparrow commentedon Jan 30, 2019
Got same issue when fetch assets from CDN when use service worker, I had to change CDN config and add 'Access-Control-Allow-Origin';
And I got another issue: we use custom user-agent on webview, and run angular app in webview, but service worker send request with the original user-agent but not the custom one, cause cannot pass some backend auth, maybe I can change service worker config to add 'User-Agent' in request header?
ademidun commentedon Aug 10, 2019
Any updates on this please?
antoinebrault commentedon Aug 29, 2019
There was a PR opened and closed. #24510
Trent-Matthias commentedon Sep 25, 2019
I'm having issues with a service worker behind ping and I'm assuming this is my issue as well, has there been any updates?
Edit: I fixed my issue by adding the cross-origin attribute here in the index.html:
leongrin commentedon Sep 19, 2020
Looking for an answer for this issue too.
gkalpak commentedon Sep 20, 2020
Sorry for the late response 😞
I was just made aware of this issue and I am having some difficulties understanding the underlying problems. For example:
In Ability to pass options to service worker's fetch request(s). #38907 (comment), @ghost says they want to configure the request with
credentials : same-originandmode: cors. But these are the default values (when creating a request using theRequestconstructor, which is what the SW does), so these should be the values one gets anyway 😕In Ability to pass options to service worker's fetch request(s). #38907 (comment), I am not sure what "CORS headers" @bjornharvold refers to. The
Access-Control-Allow-Originis missing from the response, not the request 😕In Ability to pass options to service worker's fetch request(s). #38907 (comment), I am not sure exactly what the problem was and thus how it could be addressed in the SW.
In Ability to pass options to service worker's fetch request(s). #38907 (comment), @Trent-Matthias says they fixed their issue by adding a
crossoriginattribute on their<link />element, but that should not affect how the SW requests the manifest 😕I do get that it might be a problem that the SW is dropping the request headers, as mentioned by @Jack-Sparrow in #38907 (comment). This is being tracked in #24227.
Based on the above (and the fact that the issue was opened ~2.5 years ago - a lot of SW issues have been fixed since, both in browsers and in Angular), I am going to close the issue.
If the problem you are facing is related to the SW's removing request headers, let's continue the discussion in #24227.
If the problem is different, please open a new issue (providing a clear description of the usecase and if possible a minimal reproduction).
Thank you all!
angular-automatic-lock-bot commentedon Oct 21, 2020
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.