Сервер использует Cors, но пользовательский интерфейс все еще получает ошибку разрешения источника

Question

Здравствуйте, я пытаюсь отправить http get запрос к .NET Core Console App из моего Angular 2 внешнего интерфейса, и я получаю следующую ошибку:

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.

Для меня это любопытно, поскольку я включил CORS на стороне сервера, как вы можете видеть ниже в классе 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(); });
        }
    }

Я делаю запрос от UI так:

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

PS Я пробовал с Postman, и запрос работает, однако здесь, в angular 2, я не включил headers для моего http.get метода. Может ли это быть проблемой?

Answer 1

Вам нужно поставить UseCors перед 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();
    }

Это потому, что UseCors добавляет промежуточное программное обеспечение (как и UseMvc), а промежуточное программное обеспечение выполняется в порядке сверху вниз.Таким образом, запрос никогда не попадает в промежуточное программное обеспечение CORS.