Client ASP.NET MVC + Angular и Server side ASP.NET WEB.API

@naximuz · Регистрация: 23.10.2009

Author24 — интернет-сервис помощи студентам

Доброго времени суток!
Не первый день бьюсь над задачей, не могу понять в чем причина.

Хочу создать почти HelloWorld решение, для обмена информацией между клиентом и сервером посредством Angular (разные адреса ресурсов).

Серверная часть, стандартная функция (как ValuesController) для метода GET и POST, контроллер требует авторизации.

Клиентская часть, страница регистрации и авторизации и страница получения данных (метод GET) и страница отправки данных (метод POST).

В конфигурации сервера указал разрешение для соединения:

HTML5

<httpProtocol>
    <customHeaders>
      <add name="Access-Control-Allow-Origin" value="http://localhost:16174" />
      <add name="Access-Control-Allow-Headers" value="Content-Type, authorization, Accept, X-Requested-With" />
      <add name="Access-Control-Allow-Methods" value="GET, POST" />
    </customHeaders>
  </httpProtocol>

Метод для GET выглядит проще некуда:

C#

[HttpGet]
        public IEnumerable<string> Get()
        {
            return new string[] { "GET1", "GET2" };
        }

и для POST:

C#

[HttpPost]
        public IEnumerable<string> Post()
        {
            return new string[] { "POST_Param1", "POST_Param2" };
        }

У контроллера атрибут Authorize.

Клиентская часть:

Javascript

var serverAddress = "http://localhost:1513";
 
var app = angular.module('appHello');
 
app.controller("controllerHello", [
        "$scope", "$http", function ($scope, $http) {
 
            var token = sessionStorage.getItem(tokenKey);
 
            $http({
                method: 'GET',
                url: serverAddress + '/api/EmployeeAPI',
                headers: { 'authorization': 'bearer ' + token }
            }).then(function(response) {
                $scope.cash = response.data;
 
            }, function(response) {
                console.error("Connect error");
            });
        }
    ]);

Результат запроса:

Request:

OPTIONS /api/EmployeeAPI HTTP/1.1
Host: localhost:1513
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
Access-Control-Request-Method: GET
Origin: http://localhost:16174
User-Agent: Mozilla/5.0 (Windows NT 6.2; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.35 Safari/537.36
Access-Control-Request-Headers: authorization
Accept: */*
Referer: http://localhost:16174/Employee/Index
Accept-Encoding: gzip, deflate, sdch, br
Accept-Language: ru-RU,ru;q=0.8,en-US;q=0.6,en;q=0.4

Response:

HTTP/1.1 405 Method Not Allowed
Cache-Control: no-cache
Pragma: no-cache
Allow: GET
Content-Type: application/json; charset=utf-8
Expires: -1
Server: Microsoft-IIS/8.0
X-AspNet-Version: 4.0.30319
X-SourceFiles: =?UTF-8?B?QzpcU2l0ZXNcVGVzdFxUZXN0U2RcU291cmNlXFNlcnZlclxhcGlcRW1wbG95ZWVBUEk=?=
X-Powered-By: ASP.NET
Access-Control-Allow-Origin: http://localhost:16174
Access-Control-Allow-Headers: Content-Type, authorization, Accept, X-Requested-With
Access-Control-Allow-Methods: GET, POST
Date: Wed, 09 Nov 2016 18:59:34 GMT
Content-Length: 108

Ответ сервера:
{"Message":"Запрошенный ресурс не поддерживает HTTP-метод "OPTIONS"."}

Проблема заключается в том что не могу понять почему отправляется кросс-доменный запрос OPTIONS а обоих случаях что GET что POST а не GET или POST.
Если свои заголовки не подключать (authorization для передачи токена) то запрос корректно уходит.

Что я делаю не так, в чем проблема?

@sau · 10.11.2016, 01:17

Тут дело не в asp net , это некоторые браузеры при кросс-доменных запросах делают предварительные проверочные запросы. - из соображений безопасности , на что сервер может отреагировать и дать запрет. если потребуется.

В вашем случае , нужно просто разрешить данный тип запроса , на уровне веб.апи это делается через config.EnableCors из пакета Microsoft.AspNet.WebApi.Cors

П.С Если скрипт запроса исполняется в том же домене , не нужно указывать полный адрес , достаточно указать относительный путь.

@naximuz · 10.11.2016, 08:21 **[ТС]**

Действительно, ответ был прост.
Спасибо за подсказку, перепроверил с предварительными методами, GET и POST работают корректно.
Успехов в программировании!

Новые блоги и статьи
Как программировать под HCL Notes и создавать свои продукты на ее основе InfoMaster 11.01.2025 HCL Notes (ранее известный как IBM Notes и Lotus Notes) представляет собой мощную платформу для разработки корпоративных приложений, которая сочетает в себе функции электронной почты, календаря,. . .	Как работать с SVN (Subversion) InfoMaster 11.01.2025 Введение Система контроля версий является неотъемлемой частью современного процесса разработки программного обеспечения. Она обеспечивает управление изменениями в коде, позволяет отслеживать. . .	Использование GraphQL в JavaScript InfoMaster 11.01.2025 Введение в GraphQL и его преимущества В современной разработке веб-приложений эффективный обмен данными между клиентом и сервером играет ключевую роль. GraphQL представляет собой язык запросов и. . .	Администрирование Git, продвинутые техники работы с Git InfoMaster 11.01.2025 Основы управления репозиторием Эффективное управление Git-репозиторием требует глубокого понимания механизмов контроля доступа и инструментов администрирования. Рассмотрим ключевые аспекты. . .	Что такое HCL Notes и как с ним работать InfoMaster 10.01.2025 HCL Notes (ранее известный как IBM Notes и Lotus Notes) представляет собой комплексную платформу для совместной работы и обмена информацией в корпоративной среде. Это многофункциональное решение,. . .	Как работать с Git из Windows и Visual Studio InfoMaster 10.01.2025 Работа с Git в Windows Работа с Git в операционной системе Windows может быть осуществлена с помощью различных инструментов, каждый из которых обладает своими уникальными возможностями и. . .
Аналог оператора switch case в Python InfoMaster 10.01.2025 Оператор switch case используется в программировании для выбора одного из нескольких вариантов исполнения кода. Однако в языке Python этот оператор отсутствует. Понимание аналогов switch case в. . .	Отличия абстрактного класса от интерфейса InfoMaster 10.01.2025 В современной разработке программного обеспечения существуют два основных механизма реализации абстракции: абстрактные классы и интерфейсы. Эти инструменты, хотя и схожи в своей основной цели -. . .	Как работать в Git InfoMaster 10.01.2025 Git — это одна из наиболее популярных систем контроля версий, которая активно используется разработчиками по всему миру. Она позволяет эффективно управлять изменениями в коде, координировать работу. . .	Реализация передвижения персонажа в Unity3d на C# InfoMaster 10.01.2025 Реализация передвижения персонажа в Unity3D начинается с правильной настройки проекта. Этот этап критически важен для создания отзывчивого и плавного управления. Рассмотрим основные шаги для создания. . .	Docker: руководство для начинающих InfoMaster 10.01.2025 В современном мире разработки программного обеспечения контейнеризация стала неотъемлемой частью процесса создания и развертывания приложений. Docker, как ведущая платформа контейнеризации, произвела. . .	Книги и учебные ресурсы по C# InfoMaster 08.01.2025 Базовые учебники и руководства Одной из лучших книг для начинающих является "C# 10 и . NET 6 для начинающих" Эндрю Троелсена и Филиппа Джепикса . Книга последовательно раскрывает основные концепции. . .

@sau 2756 / 2059 / 384 Регистрация: 22.07.2011 Сообщений: 7,781
	10.11.2016, 01:17	2
	Тут дело не в asp net , это некоторые браузеры при кросс-доменных запросах делают предварительные проверочные запросы. - из соображений безопасности , на что сервер может отреагировать и дать запрет. если потребуется. В вашем случае , нужно просто разрешить данный тип запроса , на уровне веб.апи это делается через config.EnableCors из пакета Microsoft.AspNet.WebApi.Cors П.С Если скрипт запроса исполняется в том же домене , не нужно указывать полный адрес , достаточно указать относительный путь. 1

@naximuz 0 / 0 / 1 Регистрация: 23.10.2009 Сообщений: 22
	10.11.2016, 08:21 [ТС]	3
	Действительно, ответ был прост. Спасибо за подсказку, перепроверил с предварительными методами, GET и POST работают корректно. Успехов в программировании! 0