The 'Access-Control-Allow-Origin' header with apache - 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>

Answer 1

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.

Answer 2

you need to enable CORS on apache configure file.
Just add his line to inside your sites-enabled folder config file
Header set Access-Control-Allow-Origin "https://domain_name.com"