title: Why am I getting "The 'Access-Control-Allow-Origin' header contains multiple values '*,*,*', but only one is allowed"?
body: <p>Locally, my Angular 1.x web app has no problem communicating with a RESTful API I have running on my machine. However, when I launch the API and web app into production, I get the following error:</p>
  
  <blockquote>
    <p>XMLHttpRequest cannot load <a href="https://api-domain-name-removed/api/common/protected/locations?l=1000" rel="nofollow noreferrer">https://api-domain-name-removed/api/common/protected/locations?l=1000</a>. Response to preflight request doesn't pass access control check: The 'Access-Control-Allow-Origin' header contains multiple values '<em>,</em>,*', but only one is allowed. Origin '<a href="https://client-domain-name-removed" rel="nofollow noreferrer">https://client-domain-name-removed</a>' is therefore not allowed access.</p>
  </blockquote>
  
  <p>I also see this OPTIONS request failure:</p>
  
  <p><a href="https://i.stack.imgur.com/fIzEo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fIzEo.png" alt="enter image description here"></a></p>
  
  <p>However, when I use Postman, I am able to make a request against the production API without problems:</p>
  
  <p><a href="https://i.stack.imgur.com/lQOYR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lQOYR.png" alt="enter image description here"></a></p>
  
  <p>Any ideas why the request is failing from the web app?</p>
  
  <p>Please note that in production, the API is running with nginx reverse proxying to an Express app, and the web app is running inside a Docker container. Also note that this same error occurs in both Chrome (v55) and Firefox (v47).</p>