如何设置WordPress和WooCommerce API，以便在发布时不会出现CORS错误？

Question

我试图使用WooCommerce API发布一个新产品，但是我得到了一个错误：

CORS策略阻止了从“从源获取

”获取“http://localhost/wordpress/wp-json/wc/v3/products”的访问:对飞行前请求的响应不通过访问控制检查:它没有HTTP状态。

如何正确设置WordPress和WooCommerce API以避免出现此错误？

到目前为止，这就是我所拥有的：

    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"

我理解CORS错误是什么，但是在这种情况下如何解决呢？

Answer 1

在Wordpress主题的functions.php文件中，添加以下操作：

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

另外，从最后一个目录块中移除反斜杠。

<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>