title: ASP.NET Core CORS WebAPI: no Access-Control-Allow-Origin header
body: <p>I have deployed my ASP.NET Core web API to Azure, and I can access its endpoints using Swagger or a web debugger like Fiddler. In both cases (same origin in Swagger, different origin using Fiddler from my computer), when accessing the APIs I get the expected result, with CORS enabled as follows in my <code>Startup.cs</code>:</p>
  
  <ol>
  <li><p>add <code>services.AddCors();</code> to <code>ConfigureServices</code>.</p></li>
  <li><p>add the middleware to <code>Configure</code>: I'm aware that order here matters (<a href="https://stackoverflow.com/questions/34065588/asp-net-5-access-control-allow-origin-in-response">ASP.NET 5: Access-Control-Allow-Origin in response</a>), so I am placing this call at the top of the method, only preceded by logging or diagnostic middleware; here is my full method:</p></li>
  </ol>
  
  <pre><code>
  public void Configure(IApplicationBuilder app, IHostingEnvironment env, 
      ILoggerFactory loggerFactory,
      IDatabaseInitializer databaseInitializer)
  {
      loggerFactory.AddConsole(Configuration.GetSection("Logging"));
      loggerFactory.AddDebug();
      loggerFactory.AddNLog();
  
      // to serve up index.html
      app.UseDefaultFiles();
      app.UseStaticFiles();
  
      // http://www.talkingdotnet.com/aspnet-core-diagnostics-middleware-error-handling/
      app.UseDeveloperExceptionPage();
      app.UseDatabaseErrorPage();
  
      // CORS
      // https://docs.asp.net/en/latest/security/cors.html
      app.UseCors(builder =>
              builder.WithOrigins("http://localhost:4200", "http://www.myclientserver.com")
                  .AllowAnyHeader()
                  .AllowAnyMethod());
  
      app.UseOAuthValidation();
      app.UseOpenIddict();
      app.UseMvc();
  
      databaseInitializer.Seed().GetAwaiter().GetResult();
      env.ConfigureNLog("nlog.config");
  
      // swagger
      app.UseSwagger();
      app.UseSwaggerUi();
  }
  </code></pre>
  
  <p>The <code>localhost</code> CORS is used during development, and refers to an Angular2 CLI app. CORS is working fine locally, and my client and API apps are on different ports on the same localhost, so this is "true" cross origin (I'm remarking this because of the suggestions I found here: <a href="https://weblog.west-wind.com/posts/2016/Sep/26/ASPNET-Core-and-CORS-Gotchas" rel="noreferrer">https://weblog.west-wind.com/posts/2016/Sep/26/ASPNET-Core-and-CORS-Gotchas</a>: the author of the post notices that the CORS header in the response is sent <em>only</em> when actually required, i.e. in true cross-origin environments).</p>
  
  <p>Using Fiddler I can succesfully access the remote API, but I get NO <code>Access-Control-Allow-Origin</code> header. Thus, when calling the API from the browser (through my client app) the AJAX request fails, even if the server returns 200. Sample Fiddler request (success):</p>
  
  <pre><code>GET http://mywebapisiteurl/api/values HTTP/1.1
  User-Agent: Fiddler
  </code></pre>
  
  <p>response:</p>
  
  <pre><code>HTTP/1.1 200 OK
  Transfer-Encoding: chunked
  Content-Type: application/json; charset=utf-8
  Server: Microsoft-IIS/8.0
  X-Powered-By: ASP.NET
  Set-Cookie: ARRAffinity=3d551180c72208c1d997584c2b6119cf44e3a55c868f05ffc9258d25a58e95b1;Path=/;Domain=prinapi.azurewebsites.net
  Date: Thu, 01 Dec 2016 10:30:19 GMT
  
  ["value1","value2"]
  </code></pre>
  
  <p>When trying to access the remote API deployed on Azure, my client app always fails its AJAX request with error:</p>
  
  <pre><code>No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://www.myclientserver.com' is therefore not allowed access.
  </code></pre>
  
  <p>Here is a sample client code using Angular2 (using Plunker):</p>
  
  <pre><code>import {Component, NgModule} from '@angular/core';
  import {BrowserModule} from '@angular/platform-browser';
  import { Http, Headers, Response } from '@angular/http';
  import { HttpModule } from '@angular/http';
  
  @Component({
    selector: 'my-app',
    template: `
      &lt;div&gt;
        &lt;h2&gt;Hello {{name}}&lt;/h2&gt;
        &lt;button (click)="test()"&gt;test&lt;/button&gt;
      &lt;/div&gt;
    `,
  })
  export class App {
    name:string;
    constructor(private _http: Http) {
      this.name = 'Angular2'
    }
    public test() {
      this._http.get('http://theapisiteurlhere/api/values',
      {
          headers: new Headers({
            'Content-Type': 'application/json'
          })
      })
      .subscribe(
        (data: any) =&gt; {
          console.log(data);
        },
        error =&gt; {
          console.log(error);
        });
    }
  }
  
  @NgModule({
    imports: [ BrowserModule, HttpModule ],
    declarations: [ App ],
    bootstrap: [ App ]
  })
  export class AppModule {}
  </code></pre>
  
  <p>To sum up, it seems that the ASPNET API server is not returning the expected CORS headers, and thus my browser-based client hosted on a different origin fails. Yet, the CORS setup seems to be OK, at least judging from the documentation quoted above; I'm in true cross-origin environment; and I'm placing the middleware before the others. Maybe I'm missing something obvious, but googling around these are all the recommendations I found. Any hint?</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>In reply to @Daniel J.G: the request/response from fiddler are successful:</p>
  
  <pre><code>GET http://theapiserver/api/values HTTP/1.1
  User-Agent: Fiddler
  Host: theapiserver
  Origin: http://theappserver/apps/prin
  </code></pre>
  
  <p>and:</p>
  
  <pre><code>HTTP/1.1 200 OK
  Content-Type: application/json; charset=utf-8
  Server: Microsoft-IIS/8.0
  Access-Control-Allow-Origin: http://theappserver/apps/prin
  X-Powered-By: ASP.NET
  Set-Cookie: ARRAffinity=3d551180c72208c1d997584c2b6119cf44e3a55c868f05ffc9258d25a58e95b1;Path=/;Domain=theapiserver
  Date: Thu, 01 Dec 2016 14:15:21 GMT
  Content-Length: 19
  
  ["value1","value2"]
  </code></pre>
  
  <p>The request/response from Angular2 (Plunker) instead fail, as reported. By inspecting the network traffic, I can see the preflight request only:</p>
  
  <pre><code>OPTIONS http://theapiserver/api/values HTTP/1.1
  Host: theapiserver
  Proxy-Connection: keep-alive
  Access-Control-Request-Method: GET
  Origin: http://run.plnkr.co
  User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.99 Safari/537.36
  Access-Control-Request-Headers: content-type
  Accept: */*
  Referer: http://run.plnkr.co/h17wYofXGFuTy2Oh/
  Accept-Encoding: gzip, deflate, sdch
  Accept-Language: en-US,en;q=0.8,it;q=0.6
  
  HTTP/1.1 204 No Content
  Server: Microsoft-IIS/8.0
  X-Powered-By: ASP.NET
  Set-Cookie: ARRAffinity=3d551180c72208c1d997584c2b6119cf44e3a55c868f05ffc9258d25a58e95b1;Path=/;Domain=theapiserver
  Date: Thu, 01 Dec 2016 14:23:02 GMT
  </code></pre>
  
  <p>After this, the request fails and no more traffic goes to the server. The reported issue is that <code>Response to preflight request doesn't pass access control check</code>, again because of lack of the header in the response:</p>
  
  <pre><code>XMLHttpRequest cannot load http://theapiserver/api/values. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://run.plnkr.co' is therefore not allowed access.
  </code></pre>