The 'Access-Control-Allow-Origin' header with apache

Question

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

When I send a request to the mentioned URL from POSTMAN, it works fine.

However, when sent through my angular application, running at demo.aonesalons.com,

I get:

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.

If I directly hit https://api.aonesalons.com/dbsynch/webocitysalonpos/in browser, it works. However, when the same url is accessed from angular app running at demo.aonesalons.com, it throws multiple CORS header error

In angular app or on directly hitting it in browser, I see that response for this request is 200, with this response:

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)

When I hit it through postman,

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)

All my requests are proxied through apache server which has

Access-Control-Allow-Origin:*

but

before coming up with *, I had

#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

Now,

After having switched it to , all response headers have Access-Control-Allow-Origin: except for this request to couchdb . I am not sure where it is picking this from.

Here's what my ssl.conf looks like:

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>

You provide an Apache config, yet mention nginx in tags and title. What exactly is going on?! Moreover, the question is not very clear on your expectations — what actions are supposed to be taken for what input?! — cnst

Philipp Ludwig Philipp Ludwig · Accepted Answer · 2018-02-28T09:58:33

As stated in the error message:

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

Only one entry of Access-Control-Allow-Origin is allowed in a HTTP response. Now since you are using a ProxyPass, it is highly likely that the target application creates it's own header entry for Access-Control-Allow-Origin, which your Apache Server forwards - and in addition to that, it adds the entry containing *, since you specified this in your configuration.

So I guess that in your Angular app you have somewhere something like .header("Access-Control-Allow-Origin","(something)"); if you remove this, your app should be accessible via your Apache server.

Alternatively, you may remove the entry Header always set Access-Control-Allow-Origin "*" in your apache config and alter your Angular app in a way that it set the correct header.

The 'Access-Control-Allow-Origin' header with apache

2 Answers