Auth0 Home Blog Docs

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

aspnet-core
cors
jw

#1

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
      );
  }
}

#2

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


#3

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?


#4

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.


#5