带有 apache 的“Access-Control-Allow-Origin”标头答案

【问题标题】：The 'Access-Control-Allow-Origin' header with apache带有 apache 的“Access-Control-Allow-Origin”标头
【发布时间】：2018-02-13 11:48:49
【问题描述】：

https://api.aonesalons.com/dbsynch/webocitysalonpos/

当我从 POSTMAN 向上述 URL 发送请求时，它工作正常。

但是，当通过我在 demo.aonesalons.com 上运行的 Angular 应用程序发送时，

我明白了：

Failed to load https://api.aonesalons.com/dbsynch/webocitysalonpos/: The 'Access-Control-Allow-Origin' header contains multiple values '*, https://demo.aonesalons.com', but only one is allowed. Origin 'https://demo.aonesalons.com' is therefore not allowed access.

如果我直接点击https://api.aonesalons.com/dbsynch/webocitysalonpos/in 浏览器，它可以工作。但是，当从 demo.aonesalons.com 上运行的 Angular 应用程序访问相同的 url 时，它会引发多个 CORS 标头错误

在 Angular 应用程序中或直接在浏览器中点击它时，我看到此请求的响应为 200，响应如下：

Access-Control-Allow-Credentials:true
Access-Control-Allow-Headers:*
Access-Control-Allow-Origin:*
Access-Control-Allow-Origin:https://demo.aonesalons.com
Access-Control-Expose-Headers:Cache-Control, Content-Type, Server
Cache-Control:must-revalidate, max-age=172800
Connection:close
Content-Length:240
Content-Type:application/json
Date:Sun, 25 Feb 2018 05:02:27 GMT
Expires:Tue, 27 Feb 2018 05:02:27 GMT
Server:CouchDB/1.6.1 (Erlang OTP/R14B04)

当我通过邮递员打到它时，

access-control-allow-headers →*
access-control-allow-origin →*
cache-control →must-revalidate, max-age=172800
connection →close
content-length →240
content-type →text/plain; charset=utf-8
date →Sun, 25 Feb 2018 05:11:50 GMT
expires →Tue, 27 Feb 2018 05:11:50 GMT
server →CouchDB/1.6.1 (Erlang OTP/R14B04)

我的所有请求都通过具有

的 apache 服务器代理

访问控制允许来源：*

但是

在提出 * 之前，我有

#SetEnvIf Origin ^(https?://(?:.+\.)?aonesalons\.com(?::\d{1,5})?)$   CORS_ALLOW_ORIGIN=$1
#Header append Access-Control-Allow-Origin  %{CORS_ALLOW_ORIGIN}e   env=CORS_ALLOW_ORIGIN

现在，

将其切换到 后，所有响应标头都有 Access-Control-Allow-Origin:，但对 couchdb 的请求除外。我不确定它是从哪里挑选的。

这是我的 ssl.conf 的样子：

Header always set Access-Control-Allow-Headers "*"
Header always set Access-Control-Allow-Origin "*"

<VirtualHost *:443>
    ServerName api.aonesalons.com
    SSLEngine on
    SSLCertificateFile /home/user/abc.crt
    SSLCertificateKeyFile /home/user/bcf.key

        ProxyPreserveHost On
        ProxyRequests Off
    ProxyPass /dbsynch http://0.0.0.0:5984/
    ProxyPassReverse /dbsynch http://0.0.0.0:5984/
    ProxyPass / http://localhost:9999/
    ProxyPassReverse / http://localhost:9999/
</VirtualHost>

【问题讨论】：

您提供了 Apache 配置，但在标签和标题中提及 nginx。究竟是怎么回事？！而且，这个问题对你的期望不是很清楚——对于什么输入应该采取什么行动？！
@cnst：已编辑。请检查

标签： apache

【解决方案1】：

如错误信息中所述：

The 'Access-Control-Allow-Origin' header contains multiple values '*, https://demo.aonesalons.com', but only one is allowed

在 HTTP 响应中只允许一个 Access-Control-Allow-Origin 条目。现在，由于您使用的是ProxyPass，因此目标应用程序很可能会为您的 Apache 服务器转发的 Access-Control-Allow-Origin 创建自己的标头条目 - 除此之外，它还会添加包含 * 的条目，因为您在配置中指定了这一点。

所以我猜在你的 Angular 应用程序中你有类似 .header("Access-Control-Allow-Origin","(something)") 的东西；如果您删除它，您的应用应该可以通过您的 Apache 服务器访问。

或者，您可以删除 apache 配置中的条目 Header always set Access-Control-Allow-Origin "*" 并以设置正确标头的方式更改您的 Angular 应用程序。

【讨论】：

【解决方案2】：

您需要在 apache 配置文件上启用 CORS。只需将他的行添加到启用站点的文件夹配置文件中标头集 Access-Control-Allow-Origin "https://domain_name.com"

【讨论】：