title: Angular 2: XMLHttpRequest cannot load https://imgur-apiv3.p.mashape.com/. A wildcard '*' cannot be used in the 'Access-Control-Allow-Origin'
body: <p>I am trying to upload an image to the imgur api:  <a href="https://imgur-apiv3.p.mashape.com/" rel="nofollow">https://imgur-apiv3.p.mashape.com/</a>.</p>
  
  <p>But I get this error: </p>
  
  <blockquote>
    <p>XMLHttpRequest cannot load <a href="https://imgur-apiv3.p.mashape.com/" rel="nofollow">https://imgur-apiv3.p.mashape.com/</a>. A
    wildcard '*' cannot be used in the 'Access-Control-Allow-Origin'
    header when the credentials flag is true. Origin
    '<a href="http://mysite.azurewebsites.net" rel="nofollow">http://mysite.azurewebsites.net</a>' is therefore not allowed access. The
    credentials mode of an XMLHttpRequest is controlled by the
    withCredentials attribute.</p>
  </blockquote>
  
  <p>What I find strange is that I do set this header: </p>
  
  <pre><code>  headers: Headers[] = [
      {
        name: 'X-Mashape-Key',
        value: 'XXX'
      },
      {
        name: 'Accept',
        value: 'application/json'
      },
      {
        name: 'Access-Control-Allow-Origin',
        value: 'http://mysite.azurewebsites.net'
      },
      {
        name: 'Access-Control-Allow-Credentials',
        value: 'true'
      }
    ];
  
    public uploader: FileUploader = new FileUploader(
      {
        url: URL,
        authToken: 'Client-ID XXX',
        headers: this.headers
      }
    );
  </code></pre>
  
  <p>In the debug console in chrome I can see: </p>
  
  <pre><code>&gt; Accept:application/json Accept-Encoding:gzip, deflate, br
  &gt; Accept-Language:en-GB,en;q=0.8,en-US;q=0.6,no;q=0.4
  &gt; Access-Control-Allow-Credentials:true
  &gt; Access-Control-Allow-Origin:http://mysite.azurewebsites.net
  &gt; Authorization:Client-ID XXX Cache-Control:no-cache
  &gt; Connection:keep-alive Content-Length:1419511
  &gt; Content-Type:multipart/form-data;
  </code></pre>
  
  <p>Also on the config in Azure portal I have set: </p>
  
  <p>ALLOWED ORIGINS</p>
  
  <pre><code>https://imgur-apiv3.p.mashape.com
  </code></pre>
  
  <p>Also uploaded a web.config file: </p>
  
  <pre><code>&lt;configuration&gt;
    &lt;system.webServer&gt;
      &lt;httpProtocol&gt;
        &lt;customHeaders&gt;
          &lt;add name="Access-Control-Allow-Origin" value="http://mysite.azurewebsites.net"/&gt;
          &lt;add name="Access-Control-Allow-Headers" value="*"/&gt;
          &lt;add name="Access-Control-Allow-Methods" value="GET,HEAD,POST,DEBUG,PUT,DELETE,PATCH,OPTIONS"/&gt;
          &lt;add name="Access-Control-Allow-Credentials" value="true"/&gt;
        &lt;/customHeaders&gt;
      &lt;/httpProtocol&gt;
      &lt;staticContent&gt;
        &lt;mimeMap fileExtension=".json" mimeType="application/json"/&gt;
      &lt;/staticContent&gt;
    &lt;/system.webServer&gt;
  &lt;/configuration&gt;
  </code></pre>
  
  <p>Seems to me I have setup CORS every single place I can think of, what am I doing wrong?</p>
  
  <p>Is it because it's a HTTP site connecting to a HTTPS API endpoint?</p>