Jwt Auth with Angular Auth0 and AspNetCore No 'Access-Control-Allow-Origin' header is present on the requested resource

I’m getting the following error on my WebAPI requests:

XMLHttpRequest cannot load https://localhost:44351/api/values/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access. The response had HTTP status code 500.
  • Note that auth & logging in works ok on the angular 2 app (as desribed by the auth0 team).

  • Note that without AUTH attribute the ValuesController works just fine

  • I inspected the response from ASP.Net Core and saw that there was indeed no 'Access-Control-Allow-Origin' header. Do I need to add anything else to the pipeline, if so what/how/different order?


HEADER INFO

Request URL:https://localhost:44351/api/values/1/
Request Method:GET
Status Code:500 Internal Server Error
Remote Address:::1]:44351
Referrer Policy:no-referrer-when-downgrade

Response Headers

Content-Length:0
Date:Mon, 17 Jul 2017 22:19:51 GMT
Server:Kestrel
X-Powered-By:ASP.NET
X-SourceFiles:=?UTF-8?B?RTpcU29sbGljaXRhdGllYmVoZWVyXFNvdXJjZVxCYWNrZW5kXEFwaVxTb2xsaWNpdGF0aWViZWhlZXIuQmFja2VuZC5BcGlcYXBpXHZhbHVlc1wxXA==?=

Request Headers

view source
Accept:application/json, text/plain, */*
Accept-Encoding:gzip, deflate, br
Accept-Language:en-GB,en-US;q=0.8,en;q=0.6
Authorization:Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImtpZCI6Ik56RTFSRE5ETVRCQk9FUTRSRFpEUXpZMU9FWTNRVGxFTVVJNU5qSTROa0U1TkRKQlFUbEZNdyJ9.eyJpc3MiOiJodHRwczovL2xlcmVuYXJkLmV1LmF1dGgwLmNvbS8iLCJzdWIiOiJhdXRoMHw1OTZkMjkzMjYxNzc3YzE4YWY2ZjUyOWUiLCJhdWQiOlsiaHR0cDovL1NvbGxpY2l0YXRpZWJlaGVlckFQSSIsImh0dHBzOi8vbGVyZW5hcmQuZXUuYXV0aDAuY29tL3VzZXJpbmZvIl0sImF6cCI6Ii01M2l5UUNnMzlkYkNHUjdWT0dmRTRKRnFCaVI2bzFHIiwiZXhwIjoxNTAwMzM2OTgyLCJpYXQiOjE1MDAzMjk3ODIsInNjb3BlIjoib3BlbmlkIHByb2ZpbGUifQ.j1BULIZ3TWTRD40sIQ8I1EngQNVreGg-4pOyqoQU3cKKPcHS4OBle_4pJBmXtYG2Eb7woJbABO2-5arKWZmByN11hOaBRTMCj24u-kqdyAPeBXGFBWcCEQ3sCXSpIxpC3S3FfsYELbEZX_8E0-rk9oqyjqlCk4UOd2NXeBuhtHt_rvbQ8SXUlNxnj3WjPri0unWW9yK2tDizc9bsOVl1hGb7e6qav8haD4chIUOuoydaczUAe9sqFUVKZU318snZmM-R_bmEn1n_QB4m4kbAwrKTQlt2tenTiEKKwmpj5aU4rWSGwwnLcw1aj81aRs0mlT0IbuczaH7JHf1y1aAoxw
Connection:keep-alive
Content-Type:application/json
Host:localhost:44351
Origin:http://localhost:4200
Referer:http://localhost:4200/ping
User-Agent:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.115 Safari/537.36

This is my WebAPI setup:

Startup.cs

public class Startup
{
    // This method gets called by the runtime. Use this method to add services to the container.
    public void ConfigureServices(IServiceCollection services)
    {
        services.AddJwtBearerAuthentication(o =>
        {
            o.Audience = "http://***********";
            o.Authority = "https://********.eu.auth0.com/";
        });
        services.AddCors();
        services.AddMvc();
        
    }

    // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
    public void Configure(IApplicationBuilder app, IHostingEnvironment env)
    {
        app.UseCors(policy => policy
            .AllowAnyOrigin()
            .AllowAnyHeader()
            .AllowAnyMethod()
            .AllowCredentials()
        );
        app.UseAuthentication();            
        app.UseMvc();
    }
}

ValuesController

[Authorize]    
[Route("api/[controller]")]
public class ValuesController : Controller
{
    // GET api/values
    [HttpGet]
    public IEnumerable<string> Get()
    {
        return new string] { "value1", "value2" };
    }

    // GET api/values/5
    [HttpGet("{id}")]
    public string Get(int id)
    {
        return "value";
    }

    // POST api/values
    [HttpPost]
    public void Post([FromBody]string value)
    {
        // For more information on protecting this API from Cross Site Request Forgery (CSRF) attacks, see https://go.microsoft.com/fwlink/?LinkID=717803
    }

    // PUT api/values/5
    [HttpPut("{id}")]
    public void Put(int id, [FromBody]string value)
    {
        // For more information on protecting this API from Cross Site Request Forgery (CSRF) attacks, see https://go.microsoft.com/fwlink/?LinkID=717803
    }

    // DELETE api/values/5
    [HttpDelete("{id}")]
    public void Delete(int id)
    {
        // For more information on protecting this API from Cross Site Request Forgery (CSRF) attacks, see https://go.microsoft.com/fwlink/?LinkID=717803
    }
}

This is the angular 2 app:

ping.component.ts (as provided by auth0 as example)

import { Component, OnInit } from '@angular/core';
import { AuthHttp } from 'angular2-jwt';
import { Http } from '@angular/http';
import { AuthService } from './../auth/auth.service';
import 'rxjs/add/operator/map';

@Component({
  selector: 'app-ping',
  templateUrl: './ping.component.html',
  styleUrls: './ping.component.css']
})
export class PingComponent implements OnInit {

  API_URL = 'https://localhost:44351/api';
  message: string;

  constructor(public auth: AuthService, public http: Http, public authHttp: AuthHttp) { }

  ngOnInit() {
  }

  public values(): void {
    this.message = '';
    this.http.get(`${this.API_URL}/values/`)
      .map(res => res.json())
      .subscribe(
      data => this.message = data.message,
      error => this.message = error
      );
  }

  public valuesByNumber(id: number): void {
    this.message = '';
    this.authHttp.get(`${this.API_URL}/values/${id}/`)
      .map(res => res.json())
      .subscribe(
      data => this.message = data.message,
      error => this.message = error
      );
  }
}

Can you try running your app on a different browser? I have encountered this issue on Chrome when making calls from localhost.

Thought so too. But I’m getting the same 500 type responses back, in Edge or FF… Seems like CORS is messing with me some how?

I’m having the same issue except trying to access a protected API via Angular 2. I’ve tried in both Firefox and Chrome - same problem.