Ошибка CORS в приложении Angularjs в chrome при доступе к .NET Web Api

Я прочитал огромное количество существующих вопросов о CORS и angular - и о том, что это не проблема для angular, но его необходимо настроить на сервере. Я пробовал так много предложений, но не могу заставить его работать.

У меня есть приложение angularJS, которое находится на моей странице ASP MVc. Он получает свои данные (в формате JSON) из приложения веб-API 2, в котором я включил CORS.

Контроллер это:

    [EnableCors("http://localhost:3419", "*", "*")]
    public class DashboardsController : ApiController
    {
        private IDashboardService _dashboardService;

        public DashboardsController(IDashboardService dashboardService)
        {
            this._dashboardService = dashboardService;

        }


      [HttpGet]
    [EnableQuery()]
    [Route("api/dashboards/")]
    public IHttpActionResult Get()
    {
        try
        {
            var dashboards = _dashboardService.GetAllDashboards().AsQueryable();

             return Ok(dashboards);
        }
        catch (Exception)
        {
            return InternalServerError();
        }
    }
}

я также добавил

config.EnableCors();

в вебапиконфиг.

Итак, теоретически теперь это должно разрешить cors? В ie работает нормально, а в chrome нет.

Поэтому дополнительно нашел ссылку на обработчик OPTIONS в web.config, поэтому прокомментировал это следующим образом:

> <system.webServer>
>     <handlers>
>       <remove name="ExtensionlessUrlHandler-Integrated-4.0" />
>       <!--<remove name="OPTIONSVerbHandler" />-->
>       <remove name="TRACEVerbHandler" />
>       <add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="*" type="System.Web.Handlers.TransferRequestHandler"
> preCondition="integratedMode,runtimeVersionv4.0" />
>     </handlers>   </system.webServer>

до сих пор нет радости. Так что дальнейшие копания привели к добавлению следующего в global.asax :

protected void Application_BeginRequest()
{
    if (Request.Headers.AllKeys.Contains("Origin") && Request.HttpMethod == "OPTIONS")
    {
        Response.Flush();
    }
}

Все, что я нашел на стороне сервера, я пробовал и не работает, поэтому я предполагаю, что это что-то на стороне клиента.

Приложение angular использует $resource для доступа к API и получения данных:

    function getAllDashboards() {
        var dashboards = $resource(appSettings.serverPath + 'api/dashboards/:id', { id: '@id' }).query();
        return dashboards;
    }

Я новичок в angular, но понял, что $resource является оболочкой для $httpProvider. Тогда единственное, что я могу найти для угловых и CORS-проблем, это добавить следующее:

  $httpProvider.defaults.useXDomain = true;
                delete $httpProvider.defaults.headers.common['X-Requested-With'];

Я сделал это, все еще не работает, но на самом деле я использую не $httpProvider, а $resource.

Есть ли что-то, что мне нужно сделать с angular и $resource, чтобы это заработало? Как я уже сказал, в IE11 он отлично работает, и, наблюдая за скрипачом, данные извлекаются в хроме, но просто возвращаются с ошибкой:

XMLHttpRequest не может загрузить http://localhost:2773//api/dashboards. В запрошенном ресурсе отсутствует заголовок «Access-Control-Allow-Origin». Таким образом, доступ к источнику 'http://localhost:3419' запрещен.

ОБНОВЛЕНИЕ. Следуя предложению vidalsasoon, теперь он работает при работе в Chrome через Visual Studio (2012), но по-прежнему не работает на сервере (Windows 2008 R2 и IIS7.5), хотя все еще работает в IE.


cors angularjs asp.net-mvc asp.net-web-api ngresource
person SteveL    schedule 29.01.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вы не должны беспокоиться о части OPTIONS, пока не сделаете POST. Это шаг 2. Сначала просто попробуйте выполнить GET.

Другим тестом будет попытка добавить эти строки в ваш сервер web.config:

<?xml version="1.0" encoding="utf-8"?>
<configuration>
 <system.webServer>
   <httpProtocol>
     <customHeaders>
       <add name="Access-Control-Allow-Origin" value="*" />
     </customHeaders>
   </httpProtocol>
 </system.webServer>
</configuration>
person vidalsasoon    schedule 29.01.2016
comment
Это работало локально, как через Visual Studio, но все еще не работало на сервере на iis. Все еще работает нормально в IE, но через хром получает 401, не авторизованный при доступе к API. Fiddler показывает, что это: ‹h2›401 — Несанкционировано: доступ запрещен из-за недействительных учетных данных.‹/h2› ‹h3›У вас нет разрешения на просмотр этого каталога или страницы с использованием предоставленных вами учетных данных.‹/h3› - person SteveL; 01.02.2016