How do I set up WordPress and WooCommerce API so that I won't get CORS error when posting?

user_6778591 0
Viewed 2952

I'm trying to post a new product using WooCommerce API, but I get an error:

Access to fetch at 'http://localhost/wordpress/wp-json/wc/v3/products from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

How do I set up WordPress and WooCommerce API correctly so that I won't get this error?

This is what I have so far: 

    window.WooCommerce = new WooCommerceApi({   
    url: "http://localhost/wordpress",
    consumerKey: ****,   
    consumerSecret: ****,
    wpAPI: true,  
    version: "wc/v3" });


  const saveProduct = event => {
    event.preventDefault();
    window.WooCommerce.postAsync("products", {
      name: name,
      regular_price: parseFloat(price),
      description: description
    })
      .then(response => console.log(response.data))
      .catch(error => console.log(error));
  };

WordPress .htaccess: 

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /wordpress/
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /wordpress/index.php [L]
Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Headers "origin, x-requested-with, content-type"
Header set Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS"
</IfModule>

WordPress httpd-app.conf: 

RewriteEngine On
RewriteRule /<none> / [L,R]

<Directory "C:\Bitnami\wordpress-5.4.1-0/apps/wordpress/htdocs">
    Options +MultiViews +FollowSymLinks
    AllowOverride None
    Header set Access-Control-Allow-Origin "*"
    <IfVersion < 2.3 >
        Order allow,deny
        Allow from all
    </IfVersion>
    <IfVersion >= 2.3>
        Require all granted
    </IfVersion>


php_value memory_limit 512M



    RewriteEngine On
    RewriteBase /wordpress/
    RewriteRule ^index\.php$ - [S=1]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /wordpress/index.php [L]

    Include "C:\Bitnami\wordpress-5.4.1-0/apps/wordpress/conf/banner.conf"
</Directory>

<Directory "C:\Bitnami\wordpress-5.4.1-0/apps/wordpress/htdocs/wp-admin">
    Header set Access-Control-Allow-Origin "\*"
    Header set Access-Control-Allow-Methods "GET, OPTIONS, POST"
    Header set Access-Control-Allow-Headers "origin, x-requested-with, content-type, accept"
</Directory>

Include "C:\Bitnami\wordpress-5.4.1-0/apps/wordpress/conf/htaccess.conf"

I understand what the CORS error is but how do I solve it in this case?

woocommerce-rest-api woocommerce reactjs wordpress javascript
1 Answers

In your Wordpress theme's functions.php file, add the following action: 

function add_cors_http_header(){
    header("Access-Control-Allow-Origin: *");
}
add_action('init','add_cors_http_header');

Also, remove the backslash from the last directory block

<Directory "C:\Bitnami\wordpress-5.4.1-0/apps/wordpress/htdocs/wp-admin">
    Header set Access-Control-Allow-Origin "*"
    Header set Access-Control-Allow-Methods "GET, OPTIONS, POST"
    Header set Access-Control-Allow-Headers "origin, x-requested-with, content-type, accept"
</Directory>
user_50695050
Related