Different WP_HOME and WP_SITEURL causes CORS error

  • Hi there
    I have built many webpages with WordPress REST API and a custom frontend, and now I started to update to WordPress 5. Suddenly it seems to be a problem that
    WP_SITEURL and WP_HOME differ (different domains).
    (I can’t publish or save a page anymore: publish failed, update failed)
    But actually this ist just true: if I have WordPress running on a totally different domain than the frontend, I want them to be different.

    No suddenly I can’t save a post anymore because of CORS.

    Has someone a hint how I could still use different domains on WP_SITEURL and WP_HOME in my wp-config.php?

     define('WP_SITEURL', 'https://cms.domain.test/wp/');  // change this to your domain or dev-domain
 define('WP_HOME', 'https://localhost:3000/'); // change this to your domain or dev-domain

    This is on my local wp-config.php
    whereas on my live Backend I got something like this:

    
 define('WP_SITEURL', 'https://cms.domain.ch/wp/');  // change this to your domain or dev-domain
 define('WP_HOME', 'https://domain.netlify.com'); // change this to your domain or dev-domain

    My netlify frontend url will change after the go live…

    Thanks a lot for your help on this matter.
    Cheers

Viewing 7 replies - 1 through 7 (of 7 total)
  • Nabil

    (@nabil_kadimi)

    Check this wesite https://enable-cors.org/server.html

    Although I wouldn’t recommend enabling all domains altogether, I suggest you allow just the domain you want.

    Nabil

    (@nabil_kadimi)

    For example, with Apache (and .htaccess), you can do:

    Header set Access-Control-Allow-Origin "cms.domain.ch"

    Thread Starter nr2012

    (@nr2012)

    Hey @nabil_kadimi thank you for your input. I got one step further. I realized that the underlying problem is not not only a CORS thing, but rather that Gutenberg tries to access the REST API. But it tries to access it on my WP_HOME and not on WP_SITEURL – which is totally wrong. So in my case Gutenberg wants to access the REST API on localhost:3000, or on my netlify domain. But there is only the frontend, and no API – enabling CORS on the frontend side will not help either.

    (I think it is related to this: https://github.com/WordPress/gutenberg/issues/1761) But I did not find any good solution.

    Is there a way to tell gutenberg where to look for those saves?

    Thanks

    Thread Starter nr2012

    (@nr2012)

    I got it to work with this:

    add_filter('rest_url', function($url) {
	// removing /wp at the end of site_url
	$pattern = '/(\S+)(\/wp\/?)$/';
	$siteURL = preg_replace($pattern, '${1}', site_url());
	$url = str_replace(home_url(), $siteURL, $url);
	return $url;
});

    Because I am serving wordpress from /wp I had to replace the /wp part in my site_url as well using a regex.
    I don’t know if I have to assume that this is a final solution, but reading the before mentioned issue on github, this was marked as no-fix. Unfortunately I also did not get their proposed solution.

    If anyone has an idea how to handle this in a better way, please let me know.
    Cheers

    Nabil

    (@nabil_kadimi)

    Your solution is fine.

    See this comment as well.

    • This reply was modified 5 years, 9 months ago by Nabil.
    • This reply was modified 5 years, 9 months ago by Nabil.
    Thread Starter nr2012

    (@nr2012)

    Ok thank you. I read that as well, but as I said I did not really get their proposal how to deal with the problem. Anyway, thank you,

    @nr2012 I am facing the same problem. I use WP as a headless CMS for our company blog. Would you be able to describe the steps involved for adding the filter?

    add_filter('rest_url', function($url) {
	// removing /wp at the end of site_url
	$pattern = '/(\S+)(\/wp\/?)$/';
	$siteURL = preg_replace($pattern, '${1}', site_url());
	$url = str_replace(home_url(), $siteURL, $url);
	return $url;
});
Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Different WP_HOME and WP_SITEURL causes CORS error’ is closed to new replies.