Не удается получить данные WebAPI

Question

В Visual Studio у меня есть два приложения. Один из них - веб-сайт Angular 2, а другой - проект WebApi. У меня есть точка останова в методе WebAPI, которая получает удар, когда служба Angular пытается получить данные, но на странице ничего не отображается. Открыв консоль браузера, я получаю следующую ошибку:

XMLHttpRequest cannot load http://localhost:58949/api/people. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:62761' is therefore not allowed access. 

Каков наилучший способ решить эту проблему? Я получил эту работу, создав приложение MVC, в котором размещены как WebAPI, так и угловые приложения, но мне это не понравилось.

Answer 1

Вам нужно будет включить CORS на веб-стороне api.

Я предполагаю, что вы используете WebApi Core. Для поддержкой CORS на стороне Web API, вы должны будете сделать это steps-

Во-первых, добавить зависимость в project.json - "Microsoft.AspNetCore.Cors": "1.0.0",

включите CORS в startup.cs как this-

app.UseCors(builder => { 
    builder.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader(); 
}); 

Вы можете найти более подробную информацию о CORS здесь - https://docs.asp.net/en/latest/security/cors.html

Смотрите, если это помогает.

Answer 2

Проблема, с которой вы сталкиваетесь, заключается в том, что браузер не разрешает запрос перекрестного происхождения по умолчанию. Как вы говорите, у вас есть два веб-сайта, у которых разные URL-адреса, скорее всего, только разные порты на localhost в вашем случае, но это все еще считается «другим» происхождением и является мерой безопасности. Вы всегда можете позволить вашему вебу-апите быть доступны либо из всех источников или вашего углового происхождения:

Access-Control-Allow-Origin: http://foo.com 
Access-Control-Allow-Methods: GET, PUT, DELETE 

ASP.NET имеет встроенный в пакете, который может сделать это для вас, так что вам не нужен шаблонные. Вы можете узнать больше об этом here. В основном это просто добавит некоторые заголовки в ваши ответы на веб-api, как в приведенном выше примере.

Answer 3

Я использую это в своих проектах WepApi. Он находится в WebApiConfig.cs.

 // Use NuGet to add this: http://www.nuget.org/packages/Microsoft.AspNet.WebApi.Cors 
     config.EnableCors();