background-sync plugin cannot be used with CORS requests

Library Affected: workbox-background-sync

Browser & Platform: all browsers

Issue or Feature Request Description: The background-sync plugin cannot be used with CORS requests due to the browsers initially sending an OPTIONS request to check the CORS headers.

If the OPTIONS request succeeds but the POST request fails (e.g. 500 error) then the POST request is successfully queued and everything works as expected.

However if we are offline when we first send the request through, the browser sends the OPTIONS request and gets the offline network error. In response the browser never attempts to send the POST request so it doesn’t get queued to retry.

Ideally we need some way to store and replay a request chain rather than just a single request so in the instance of a CORS check we can queue the OPTIONS and then the POST request.

I’m not sure what the implementation of this would look like using axios or fetch once implemented.

As it stands the only way to use the background-sync plugin with a remote API is to setup a proxy (E.g. Apache Reverse Proxy or a node proxy) as a subfolder and request to that. However this means we can’t for example deploy our PWA on any static file hosts e.g. github pages or an AWS S3 bucket since we cannot add a proxy there.

[sharperDev2112]

Any news on this? Thanks…

[rickardliljeberg]

I got your code to fail just fine as advertised @jeffposnick I modified it slightly to use post, include a body and set content type.

const request = new Request('https://myRandomDomain.com/home/hello', {
	method: 'POST',
	mode: 'cors',
	headers: new Headers({'content-type': 'application/json'}),
	body: JSON.stringify({"name": "name"})
});

const fetchDidFail = ({request}) => console.log('failed: ', request.method);
const networkOnly = new workbox.strategies.NetworkOnly({plugins: [fetchDidFail]});

networkOnly.handle({request}).then(response => console.log("cool "+response.status));

If the server on “myRandomDomain.com” is running it all works fine and it prints "cool 200 (from the last line of code

However, if I stop the webserver running at myRandomDomain.com chrome gives me 2 errors, namely

Access to fetch at ‘https://myRandomDomain.com/home/hello’ from origin ‘https://myDomainRunningMyApp.com’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.

And

VM8 workbox-strategies.prod.js:1 Uncaught (in promise) no-response: no-response :: [{“url”:“https://myRandomDomain.com/home/hello","error”:{}}] at Object.handle (https://storage.googleapis.com/workbox-cdn/releases/5.1.3/workbox-strategies.prod.js:1:2862)