Top of page

Fix 'XMLHttpRequest cannot load / CORS' error when WordPress address and Site address differ

Varmapublished on January 22, 2020 & last updated on September 14, 2020

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.

In Perfmatters WordPress Performance Plugin

Flat 10% OFF on Perfmatters WordPress Performance Plugin

Get flat 10 per cent discount on Perfmatters WordPress Performance Plugin.

10% OFF Coupon
PERFMATTERS CopyGet this deal

In Jetpack

Flat 15% discount on Jetpack Personal, Premium & Professional Plan

Get flat 15 per cent discount on Jetpack Personal, Jetpack Premium and Jetpack Professional plans which offers advanced marketing tools, on-demand backup and scanning, priority support and more.

Flat 15% Coupon
NEWSITE2020 CopyGet this deal

Related Articles

Fetching coffee...

{}