Solvedgutenberg Gutenberg breaks completely if site URL is not the same as wordpress URL

Issue Overview

I have wordpress installed on domain1/subdirectory, but I set up an addon domain (domain2) to be the main way to visit the site. Wordpress supports this by allowing you to change the site address to be different from the actual wordpress address in settings. However, this breaks gutenberg entirely because of WP-NONCE.

Steps to Reproduce (for bugs)

  1. Get a hosting account and a domain (domain1)
  2. Install wordpress in a subdirectory
  3. buy another domain (domain2)
  4. set domain2 as addon domain, pointing to domain1/subdirectory (because I want people to end up on domain2/permalink-to-post, not domain1/subdirectory/permalink-to-post
  5. install gutenberg
  6. open gutenberg (new post or demo, doesn't matter) and see a white screen

Expected Behavior

For gutenberg to function as intended (or even load at all).

Current Behavior

Because the site URL and the wordpress URL differ, loading gutenberg throws the following errors:

XMLHttpRequest cannot load http://<domain1>/wp-json/wp/v2/. Request header field X-WP-Nonce is not allowed by Access-Control-Allow-Headers in preflight response.

GET http://<domain1>/wp-json/jetpack/v4/jitm?message_path=wp%3Agutenber…erg-demo%3Aadmin_notices&query=page%253Dgutenberg-demo&_wpnonce=49a5b82bc9 403 (Forbidden)

Related Issues and/or PRs

I've had contact with Automattic about this before, because gutenberg is not the only thing that breaks. Jetpack has been broken on my site for a long time. And the Customizer, too, does not work at all in a setup like this. Neither does Yoast's onboarding wizard and text link counter tool.

They told me this was related to a wontfix in core:

The above could be lived with (I have for some years now), but if the core editor in wordpress breaks, that's another story.

First question: is there a better way to create this setup (without getting a second hosting account)? If so, that might render the problem moot (at least for me).
Second question: If not, what can be done about this?

35 Answers

✔️Accepted Answer

Here's what I did to make it work (I only have 1 site):

add_filter('rest_url', function($url) {
    $url = str_replace(home_url(), site_url(), $url);
    return $url;

Other Answers:

It is absolutely bizarre that Gutenberg API calls are calling the site URL instead of the Wordpress installation URL!

Whats the point of having these 2 seperated fields if it doesnt even serve its basic purpose. It is leaving us unable to use the WP REST API as a standalone headless content service and still be able to preview and click links in the editor to view your posts, it is not user friendly at all. Seems such a simple issue to fix and this issue seems to have been open for a long time.

This issue is breaking a production site for me now too. Thanks WordPress.

More Issues: