Myujth

Hello i am trying to issue a http get request to a .NET Core Console App from my Angular 2 frontend and i get the following error:

Access to XMLHttpRequest at 'http://127.0.0.1:9300/api/getusers' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

For me it is curious since i have enabled CORS on the server side as you can see below in the Startup class.

Startup

public class Startup 

 public Startup(IConfiguration configuration) 
 Configuration = configuration;
 
 public void ConfigureServices(IServiceCollection services) 
 services.AddOptions();
 services.AddMvc();
 
 public IConfiguration Configuration;
 public void Configure(IApplicationBuilder app) 
 Console.WriteLine("request delievered");
 Debug.WriteLine("Entered Server !");
 app.UseMvc();
 app.UseCors(x => x.AllowAnyHeader(); x.AllowAnyOrigin();x.AllowAnyMethod(); );
 
 

I make the request from the UI like this:

@Injectable()
export class UserService

 private static baseUrl:string="http://127.0.0.1:9300/api";

 constructor(private http:HttpClient) 
 

 getClientsAsync():Promise<User>
 let route=UserService.baseUrl+"/getusers";
 var data=(this.http.get(route) //should i have some headers here?
 .map(resp=>resp)
 .catch(err=>
 Observable.throwError(err)

 ) as Observable<User>).toPromise<User>();

 return data;
 

P.S I have tried with Postman and the request works ,however here in the angular 2 i have not included any headers for my http.get method.Could this be the problem ?

You need to put UseCors before UseMvc.

 public void Configure(IApplicationBuilder app) 
 Console.WriteLine("request delievered");
 Debug.WriteLine("Entered Server !");
 app.UseCors(x => x.AllowAnyHeader(); x.AllowAnyOrigin();x.AllowAnyMethod(); );
 app.UseMvc();
 

This is because UseCors adds a middleware (as does UseMvc), and middleware are executed in order from top to bottom. So the request never gets to the CORS middleware.