Synchronous XMLHttpRequest Failing in Chrome 73

This is a short post to teaching you how to fix the error about synchronous XMR in Chrome 73

If your website recently fails to execute the request which binds with beforeunload event. It’s caused by Chrome now disallowed the synchronous request during end-of-page.

Here is a stack overflow post about this problem — Ajax Synchronous Request Failing in Chrome. And the solution is to replace by sendBeacon.

But if you need a custom header on your request, you properly will see this error after you switch to sendBeacon.

"Failed to execute 'sendBeacon' on 'Navigator': sendBeacon() with a Blob whose type is not any of the CORS-safelisted values for the Content-Type request header is disabled temporarily. See http://crbug.com/490015 for details."

And after browsing the page in the error message, you will find the current solution will be:

> If you need a same-origin beacon, fetch(url, {mode: 'same-origin', keepalive: true, ...})  serves well.
> If you need a cross-origin beacon, we haven't implemented it, but we are resolving the blocking issue. After that we are planning to support it.

If you need a same-origin beacon, after the change to fetch with keepalive: true, you might still see the error like this:

Preflight request for request with keepalive specified is currently not supported

Here is an issue on chromium about this error, and should be fixed at mid-Aug 2019.

Conclusion

1. If you use Synchronous XMLHttpRequest on beforeunload , you will need to switch to sendBeacon .
2. If you need a custom header for your request.
   - same-origin: use `fetch(url, {mode: ‘same-origin’, keepalive: true, …})`, but have some bug need to be fixed by chromium.
   - cross-origin: haven’t implemented yet.

—

Reference

• Ajax Synchronous Request Failing in Chrome
• sending http requests in beforeunload no longer works
• Using the Beacon API
• Security: sendBeacon let’s you send POST requests with arbitrary content type
• Preflight request for request with keepalive specified is currently not supported” on same-origin fetch requests