没有使用 Angular + WordPress 的“Access-Control-Allow-Origin”标头

Posted 2023-02-19

【中文标题】没有使用 Angular + WordPress 的“Access-Control-Allow-Origin”标头

【英文标题】：No ‘Access-Control-Allow-Origin’ header is present using angular + WordPress

【发布时间】：2019-11-17 23:17:58

【问题描述】：

当我在 woocommerce api 中使用 POST 方法发布数据时。我遇到了 cors 问题

从源“http://localhost:8100”获取“http://localhost/wordpress/wc-api/v3/customers?oauth_consumer_key=ck_64d88e1fa3516e9f5a06b6053f02976a534d3f8f&oauth_nonce=zsu3ysEnFHhvrZt4Nc7H66Dgu28H20K7&oauth_signature_method=HMAC-SHA256&oauth_timestamp=1562587817&oauth_version=1.0&oauth_signature=KtFxvyQNklUlfCi6rNWyJ0DEJ6AS2ZbwbO44u%2FEqxG4%3D”的访问权限已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：它没有 HTTP ok 状态。

【参考方案1】：

如果您的服务器与您发出这些请求的应用程序位于不同的域中，则您必须在对服务器的每个请求上设置一个 Access-Control-Allow-Origin 标头（服务器将其设置为响应标头)。添加该标头会告诉系统允许外部域“localhost:8100”发出这些请求。

您无法在普通浏览器中规避此要求，因为它是减少 CORS 攻击的内置安全功能

附言。同一域上的不同端口被认为是不同的域。因此，如果您向 example.com:8100 发出请求，example.com 将收到 401 错误。 localhost 或任何其他域也是如此。

来自 Apache2 Web 服务器 .conf 文件的示例代码，我个人用来设置这些标头。

SetEnvIf Origin "^http(s)?://(.+\.)?(staging.\xxx\.com|xxx\.com|xxx\.local|xxx\.local:4200|a2\.local)$" origin_is=$0
Header always set Access-Control-Allow-Origin %origin_ise env=origin_is

只需将 xxx.com 域替换为 localhost:8100 或该数组中您需要的任何其他内容。 （如果您使用的是 Apache Web 服务器）

因此，Chrome 网络选项卡应在请求上附加一个 Access-Control-Allow-Origin 标头