Woocommerce Store API添加请求头触发CORS错误求助

问题背景 #

在Hostinger托管的WordPress站点，使用WooCommerce插件的Store API（../wp-json/wc/store），通过VueJS前端用Axios调用API。已在.htaccess配置跨域允许源，普通请求可正常发起，但给POST请求添加Nonce请求头时，OPTIONS预请求触发CORS错误，无法完成加购、结账等操作。

报错截图：

Axios调用代码：

axios.post('https://example.com/wp-json/wc/store/cart/add-item', {
  id: /* 产品ID */,
  quantity: /* 购买数量 */
},
{
  headers: {
    Nonce: /* 之前获取的Nonce值 */
  }
}).then(res => {
  console.log(res)
}).catch(err => {
  console.log(err)
})

Postman可正常请求，但Axios调用失败，修改.htaccess的其他CORS头无效，急需解决。

解决方案 #

1. 修正Nonce请求头的名称

WooCommerce Store API不识别自定义的Nonce头，它要求的标准Nonce头是X-WC-Store-API-Nonce。直接修改请求头：

axios.post('https://example.com/wp-json/wc/store/cart/add-item', {
  id: /* 产品ID */,
  quantity: /* 购买数量 */
},
{
  headers: {
    'X-WC-Store-API-Nonce': /* 有效Nonce值 */
  }
})

2. 完善.htaccess的CORS配置

确保配置允许OPTIONS预请求，同时明确放行需要的请求头：

<IfModule mod_headers.c>
  # 替换为你的前端域名，支持多个的话用逗号分隔（部分环境支持）
  Header set Access-Control-Allow-Origin "https://your-frontend-domain.com"
  # 允许的请求方法
  Header set Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS"
  # 必须包含X-WC-Store-API-Nonce，按需添加其他头
  Header set Access-Control-Allow-Headers "Content-Type, X-WC-Store-API-Nonce"
  # 若需要携带Cookie等凭证，开启此项
  Header set Access-Control-Allow-Credentials "true"

  # 处理OPTIONS预请求，直接返回200
  RewriteEngine On
  RewriteCond %{REQUEST_METHOD} OPTIONS
  RewriteRule ^(.*)$ $1 [R=200,L]
</IfModule>

如果Hostinger环境下mod_headers未启用，联系客服开启即可。

3. 确保Nonce获取方式正确

Nonce必须通过WooCommerce官方接口wc/store/v1/nonces获取，返回的nonce才是有效的（默认有效期12小时）：

axios.get('https://example.com/wp-json/wc/store/v1/nonces')
  .then(res => {
    const validNonce = res.data.nonce;
    // 使用该nonce发起后续请求
  })

4. 排查Axios全局配置

如果有Axios全局拦截器或默认请求头，可能额外添加了未被允许的头导致预请求失败。临时移除全局配置，仅在当前请求中添加必要头测试。

5. 清除浏览器缓存

浏览器可能缓存了旧的CORS响应头，导致新配置不生效。用无痕模式测试，或手动清除浏览器缓存后重试。

内容的提问来源于stack exchange，提问作者Martin Seidl