I´ve written front-end application in Angular 4. This front-end is trying to make a request to endpoints which required authorization token. I am using JWT token with ASP.NET Core 2.0. Because both are running on different ports, i have to set CORS.
So request with added Authorization header returns response from server with 401 Error code. I tried to use many solution from these threads:
- Setting cors there is also idea with custom CorsMiddleware,
which I Tried, but still receiving 401. - Similiar solution to custom Cors middleware
- Custom cors middleware This wasn´t even working
, which at first glance appear to be solving a similar problem. However, I am not able to get right response from server. Method without attribute [Authorize] are working correctly (Methods which don´t need Bearer token) Could be error somewhere else? (Token are indeed valid, tested from POSTMAN). Have anybody idea, what's could be a problem?
This is how I set CORS
public void ConfigureServices(IServiceCollection services)
{
services.AddCors(options =>
{
options.AddPolicy("CorsPolicy",
builder => builder.WithOrigins("http://localhost:4200")
.AllowAnyMethod()
.AllowAnyHeader());
});
}
Apply Cors before Mvc
public void Configure(IApplicationBuilder app,
IHostingEnvironment env, UnitOfWork identityCustomDbContext)
{
app.UseCors("CorsPolicy");
app.UseMvc();
}
Angular token interceptor
export class TokenInterceptor implements HttpInterceptor {
constructor(private injector: Injector, private _router: Router){}
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>>{
const auth = this.injector.get(AuthService);
let token = auth.getToken();
if(token){
const authReq = req.clone({headers:req.headers.set('Authorization', token).set('Content-Type','application/json')})
return next.handle(authReq);
}
}
}
Requests headers
OPTIONS request
status code: 204 No Content
OPTIONS http://localhost:57498/api/users
Host: localhost:57498
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate
Access-Control-Request-Method: GET
Access-Control-Request-Headers: authorization,content-type
Origin: http://localhost:4200
Connection: keep-alive
OPTIONS response
Server: Kestrel
Access-Control-Allow-Headers: authorization,content-type
Access-Control-Allow-Origin: http://localhost:4200
X-SourceFiles: =?UTF-8?B?RDpcQ29uZmVlLWJhY2tlbmRcQ29uZmVlLXdlYkFwaVxDb25mZWUtd2ViQXBpXGFwaVx1c2Vycw==?=
X-Powered-By: ASP.NET
GET request
status code: 401 Unauthorized
Accept: application/json, text/plain, */*
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate
Referer: http://localhost:4200/admin/conferences
Authorization: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJsdUBzLmNvbSIsImp0aSI6ImJmMDk3ZmYwLTRjMGUtNGZkMC04YTM1LTQ4MzZlY2U2OGE0OSIsImh0dHA6Ly9zY2hlbWFzLnhtbHNvYXAub3JnL3dzLzIwMDUvMDUvaWRlbnRpdHkvY2xhaW1zL25hbWVpZGVudGlmaWVyIjoiYmMzZWQxMzQtMTAyNS00OWVjLTk1YWYtZDk0ODMxNWVmYzI0IiwiaHR0cDovL3NjaGVtYXMubWljcm9zb2Z0LmNvbS93cy8yMDA4LzA2L2lkZW50aXR5L2NsYWltcy9yb2xlIjoiQWRtaW5pc3RyYXRvciIsImV4cCI6MTUyMDUzNzQ3MCwiaXNzIjoiaHR0cDovL2xvY2FsaG9zdDo1NzQ5OC8iLCJhdWQiOiJodHRwOi8vbG9jYWxob3N0OjU3NDk4LyJ9.rUwoq_olnVg7lOvtX1AIpB1JDDwBi9ra3FhBLaSSLuQ
Content-Type: application/json
Origin: http://localhost:4200
Connection: keep-alive
GET response
Server: Kestrel
WWW-Authenticate: Bearer
Access-Control-Allow-Origin: http://localhost:4200
X-SourceFiles: =?UTF-8?B?RDpcQ29uZmVlLWJhY2tlbmRcQ29uZmVlLXdlYkFwaVxDb25mZWUtd2ViQXBpXGFwaVx1c2Vycw==?=
X-Powered-By: ASP.NET
Content-Length: 0
According to link 2 and 3 above, I tried to implement custom CORS middleware
public class CorsMiddleware
{
private readonly RequestDelegate _next;
public CorsMiddleware(RequestDelegate next)
{
_next = next;
}
public Task Invoke(HttpContext httpContext)
{
httpContext.Response.Headers.Add("Access-Control-Allow-Origin", "*");
httpContext.Response.Headers.Add("Access-Control-Allow-Headers", "Content-Type, Authorization, X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Date, X-Api-Version, X-File-Name");
httpContext.Response.Headers.Add("Access-Control-Allow-Methods", "POST,GET,PUT,PATCH,DELETE,OPTIONS");
return _next(httpContext);
}
}
public static class CorsMiddlewareExtensions
{
public static IApplicationBuilder UseCorsMiddleware(this IApplicationBuilder builder)
{
return builder.UseMiddleware<CorsMiddleware>();
}
}
public void Configure(IApplicationBuilder app,
IHostingEnvironment env, UnitOfWork identityCustomDbContext)
{
app.UseCorseMiddleware();
app.UseMvc();
app.UseCors("CorsPolicy");
}
The result was same. I have recieved 401 from server.
