如何設置 WordPress 和 WooCommerce API 以便在發布時不會出現 Z5A8FEFF0B4BDE3EEC91244B76023 錯誤？

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檢查：它沒有 HTTP ok 狀態。

如何正確設置 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>