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 работают корректно.
Успехов в программировании!

@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