如何设置 WordPress 和 WooCommerce API 以便在发帖时不会出现 CORS 错误?
How do I set up WordPress and WooCommerce API so that I won't get CORS error when posting?
我正在尝试 post 使用 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 错误是什么,但在这种情况下我该如何解决?
在您的 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>
我正在尝试 post 使用 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 错误是什么,但在这种情况下我该如何解决?
在您的 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>