Angular 2: XMLHttpRequest cannot load https://imgur-apiv3.p.mashape.com/. A wildcard '*' cannot be used in the 'Access-Control-Allow-Origin'
<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>