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

Question

我正在尝试使用WooCommerce API发布新产品，但出现错误：

可从'http://localhost/wordpress/wp-json/wc/v3/products获取数据来自来源“ http://localhost:3000”的信息已被CORS政策阻止：对预检请求的响应未通过访问控制检查：没有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>