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