Top of page

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

Varmapublished on January 22, 2020 & last updated on November 24, 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 40% OFF on WordPress Jetpack plans

Get flat 40 per cent discount on WordPress Jetpack automated real-time backups. security scan and other premium plans. Jetpack Security pack provides easy-to-use, comprehensive WordPress site security including automated backups, malware scanning, and spam protection.

40% OFF Coupon
JETBLACK CopyGet this deal

Related Articles

Fetching coffee...

{}