While building a headless WordPress site (like this website), our backend (which is the WordPress part) resides in a different domain (or in a subdomain/subfolder of the main domain) and the custom frontend developed using WordPress REST API in another domain (or the main domain name). WordPress supports this by allowing you have different URL for WordPress address (WP_HOME) and site address (WP_SITEURL).
Note that, the "WordPress Address (URL)" (found in Settings > General) is the address where your WordPress core files reside. Whereas, the "Site Address (URL)" is the address where you want your visitors to reach and view your site.
Now to the main issue, in WordPress 5.0 (and higher) + Gutenberg editor and the above condition of different WordPress address and site address defined you can't save or even edit any post or page (or custom posts/pages). In some cases, while opening a post/page to edit or trying to add a new post/page, the white screen shows up and nothing getting loaded. While checking the browser console you could find REST API calls failing (browser blocking WordPress REST API's) due to CORS (cross-origin resource sharing).
"XMLHttpRequest cannot load https://wordpressite.com/wp-json/… Request header field X-WP-Nonce is not allowed by Access-Control-Allow-Headers in preflight response."
The error is valid as you shouldn't be able to send the nonce from a different origin and cookie authentication is intentionally limited by the nonce to the current site. There seems to be no core fix coming up any time soon.
The workaround to this issue is by sending custom headers. If that's hard to achieve then you could try the below snippet by adding it in your themes folder functions.php.
add_filter('rest_url', function($url) {
$url = str_replace(home_url(), site_url(), $url);
return $url;
});
Thanks, Savageman for the fix.