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

Question

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

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.

如何正确设置 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>