title: Multiple Access-Control-Allow-Origin headers
body: <p>For reference I'm using Visual Studio 2017 and Windows 10. </p>
  
  <p>I have a web api and corresponding web application with user accounts. When I attempted to login I was met with an error which said No Access-Control-Allow-Origin header is present. I found a guide that walked me through how to setup CORS. This is the guide I used.</p>
  
  <p><a href="https://social.technet.microsoft.com/wiki/contents/articles/33771.fix-to-no-access-control-allow-origin-header-is-present-or-working-with-cross-origin-request-in-asp-net-web-api.aspx" rel="nofollow noreferrer">https://social.technet.microsoft.com/wiki/contents/articles/33771.fix-to-no-access-control-allow-origin-header-is-present-or-working-with-cross-origin-request-in-asp-net-web-api.aspx</a></p>
  
  <p>In my WebApiConfig file I have this code</p>
  
  <pre><code>public static void Register(HttpConfiguration config)
      {
          // Web API configuration and services
          // Configure Web API to use only bearer token authentication.
          config.SuppressDefaultHostAuthentication();
          config.Filters.Add(new HostAuthenticationFilter(OAuthDefaults.AuthenticationType));
  
          // Web API routes
          config.MapHttpAttributeRoutes();
  
          config.Routes.MapHttpRoute(
              name: "DefaultApi",
              routeTemplate: "api/{controller}/{id}",
              defaults: new { id = RouteParameter.Optional }
          );
  
          var cors = new EnableCorsAttribute("*", "*", "*");
          config.EnableCors(cors);
      }
  </code></pre>
  
  <p>In my AccountController file I added in the EnableCors at the top.</p>
  
  <pre><code>[EnableCors(origins: "*", headers: "*", methods: "*")]
  [Authorize]
  [RoutePrefix("api/Account")]
  </code></pre>
  
  <p>Finally, in my Web.config file I added the following:</p>
  
  <pre><code>&lt;httpProtocol&gt;
    &lt;customHeaders&gt;
      &lt;add name="Access-Control-Allow-Origin" value="*" /&gt;
      &lt;add name="Access-Control-Allow-Headers" value="Content-Type" /&gt;
      &lt;add name="Access-Control-Allow-Methods" value="GET,POST,PUT,DELETE,OPTIONS" /&gt;
      &lt;add name="Access-Control-Allow-Credentials" value="true" /&gt;
    &lt;/customHeaders&gt;
  &lt;/httpProtocol&gt;
  </code></pre>
  
  <p>This fixed my login issue however, none of my GETS are working. Here is an example of a GET function:</p>
  
  <pre><code>jQuery.support.cors = true;
      if (window.XMLHttpRequest) {
          var xmlhttp = new XMLHttpRequest();
          xmlhttp.open("GET", 'http://localhost:60690/api/ProfilePicture?Username=' + username, false);
          xmlhttp.setRequestHeader('Content-Type', 'application/json; charset=utf-8');
          xmlhttp.setRequestHeader('Authorization', 'Bearer ' + localStorage.getItem('accessToken'));
          xmlhttp.send();
          if (xmlhttp.status == 200) {
              returnValue = jQuery.parseJSON(xmlhttp.responseText);
          }
      }
  </code></pre>
  
  <p>The GET is throwing an error which says "Multiple Access-Control-Allow-Origin headers are not allowed for CORS response". I don't see where I have multiple Access-Control-Allow-Origin headers anywhere. Where should I be looking?</p>
  
  <p><strong>Update 1</strong></p>
  
  <p>Found something interesting. I used Fiddler to watch everything going on in the background and on the GET function that causes the error I'm seeing this in the headers:</p>
  
  <p><a href="https://i.stack.imgur.com/bWOsb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bWOsb.png" alt="enter image description here"></a></p>
  
  <p>So the "Access-Control-Allow-Origin: *" is definitely showing twice but the question is why. I searched all of my code and I only have that declared once. If I remove that line, it breaks the login page so I have to leave it in.</p>