Solutions to API errors when WordPress home and site address are different

  • Resolved seotaro

    (@seotaro)


    1 year, 5 months ago

    Hi.I’m using Nginx’s reverse proxy to route en.example.com to example.com/en/.

    Overall it works fine, but I am getting CORS errors on pages with woocommerce blocks inserted (such as Cart, Checkout).

    Screenshot -> https://imgsh.net/a/sJGykIA.jpg

    This issue will occur Gutenberg editor too.

    However, I found that Gutenberg can work around this by using the following code to set the site address (site URL) to be the base for the API instead of the WordPress address (home URL).

    // change WordPress API URL to HOME URL
add_filter('rest_url', 'wptips_home_url_as_api_url');
function wptips_home_url_as_api_url($url) {
    $url = str_replace(home_url(),site_url() , $url);
    return $url;
}

    Could you please tell me if there’s any way to apply this code to the WooCommerce block, or if there’s another workaround?

    Thank you.

    • This topic was modified 1 year, 5 months ago by seotaro.
Viewing 1 replies (of 1 total)
  • Plugin Support con

    (@conschneider)

    Engineer

    Hi there,

    I would try and tackle a CORS error on the server not application level if possible. Since you have access to the server, we could try and modify the nginx.conf as follows:

    1. Open your Nginx configuration file (nginx.conf or the specific configuration file for your site, usually located in /etc/nginx/sites-available/).

    2. Locate the location block that handles the reverse proxy for en.seoartgallery.com. Inside this block, add the following lines to set the CORS headers:

    
add_header 'Access-Control-Allow-Origin' 'https://seoartgallery.com';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';

    3. Additionally, you need to handle the preflight OPTIONS request. Add a new location block inside the server block, above the existing location block:

    
location / {
    if ($request_method = OPTIONS) {
        add_header 'Access-Control-Allow-Origin' 'https://seoartgallery.com';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
        add_header 'Access-Control-Max-Age' 1728000;
        add_header 'Content-Type' 'text/plain; charset=utf-8';
        add_header 'Content-Length' 0;
        return 204;
    }
}

    4. Save the configuration file and restart Nginx to apply the changes:

    
sudo nginx -t
sudo systemctl restart nginx

    This should resolve the CORS errors you’re experiencing with WooCommerce blocks. If you still face issues, double-check the configuration and make sure the headers are correctly set.

    Also backup all the things always. ??.

Viewing 1 replies (of 1 total)
  • The topic ‘Solutions to API errors when WordPress home and site address are different’ is closed to new replies.