Is there a way to securely access a resource from a third-party domain using XML HTTP Requests (XHR, AJAX)?
I have set up CORS on both the target and origin sides with the following configuration:
Access-Control-Allow-Origin: http://www.example.com, https://www.example.com, http://www.example.org, https://www.example.org
Access-Control-Allow-Methods: GET, POST, HEAD, OPTIONS
However, browsers like Chrome, Firefox, and Internet Explorer are blocking the XHR request to when initiated from http://www.example.com/bar.
The most detailed error message is provided by Firefox:
XMLHttpRequest cannot load . The 'Access-Control-Allow-Origin' header contains multiple values 'http://www.example.com, https://www.example.com, , ', but only one is allowed. Origin 'http://www.example.com' is therefore not allowed access.
This error seems quite perplexing, almost like being told "Hey, you're A and want to talk to B, but B only accepts A and B. So sorry, no communication allowed." How can we correctly implement CORS (Access-Control-Allow-Origin) in this scenario?