ASP.NET MVC 5 - JQuery AJAX работает, Fetch API - нет

Question

В моем проекте ASP.NET MVC 5 я настроил локальные API с помощью WebApi, и я проверяю роли пользователей с использованием ASP.NET Identity во всех API, которые изменяют данные. Когда я делаю POST запрос на api/createPerson, используя jQuery AJAX , он работает нормально. Однако когда я использую свою собственную библиотеку Fetch API , сервер возвращает HTML страницы входа в систему вместо данных JSON .

Как видите, анализ JSON не выполняется (потому что это HTML, а не допустимый код JSON).

Однако, если я отключу блок кода в контроллере API:

if (!User.IsInRole("Admin"))
    return Unauthorized();

Сервер возвращает JSON в обычном режиме.

Почему мой User.IsInRole("Admin") чек возвращает true, когда я использую запрос jQuery AJAX, и все же он возвращает false, когда я использую Fetch API?

Код, который работает (jQuery AJAX):

$.ajax({
    method: "POST",
    url: `/api/createPerson/`,
    type: "application/json",
    data: {
        id: idHidden,
        firstName: firstNameTxt.val(),
        lastName: lastNameTxt.val(),
        phoneNumber: phoneTxt.val(),
        gender: genderDropDown.val(),
        birthDate: birthdateTxt.val(),
        email: emailTxt.val(),
        stateId: statesDropDown.val(),
        cityId: citiesDropDown.val()
    },
    success: function (message) {
        // ...
    },
    error: function (error) {
        if (error.responseJSON.modelState)                                
            showValidationMessages(error.responseJSON.modelState);      
    });

Код, который не работает (Fetch API):

httpFetch.post("/api/createPerson/", {                    
    id: idHidden,
    firstName: firstNameTxt.val(),
    lastName: lastNameTxt.val(),
    phoneNumber: phoneTxt.val(),
    gender: genderDropDown.val(),
    birthDate: birthdateTxt.val(),
    email: emailTxt.val(),
    stateId: statesDropDown.val(),
    cityId: citiesDropDown.val()
}).then(message => {
    // ...
})

Код контроллера API:

[HttpPost]
    [Route("api/createPerson")]
    public IHttpActionResult CreatePerson(PersonDto personDto)
    {
        //Check for privileges(ADMIN ONLY!)
        if (!User.IsInRole("Admin"))
                return Unauthorized();

        // Check if model state is valid
        if (!ModelState.IsValid)
        {
            return BadRequest(ModelState);
        }

        // Check if person already exists in the database, if true, update it
        if (personDto.Id != 0)
        {
            // Try updating person in db
            try
            {
                var personInDb = _context.Persons.SingleOrDefault(p => p.Id == personDto.Id);

                personInDb.FirstName = personDto.FirstName;
                personInDb.LastName = personDto.LastName;
                personInDb.Gender = personDto.Gender;
                personInDb.Email = personDto.Email;
                personInDb.BirthDate = personDto.BirthDate;
                personInDb.PhoneNumber = personDto.PhoneNumber;
                personInDb.StateId = personDto.StateId;
                personInDb.CityId = personDto.CityId;

                _context.SaveChanges();
            }
            catch (Exception)
            {
                // if ERROR
                return BadRequest(ModelState);
            }

            // if SUCCESS
            return Ok($"{personDto.FirstName} {personDto.LastName} updated in the database!");
        }

        // If person doesn't exist in db, add new person to db
        try
        {
            var person = new Person
            {
                Id = personDto.Id,
                FirstName = personDto.FirstName,
                LastName = personDto.LastName,
                Gender = personDto.Gender,
                Email = personDto.Email,
                BirthDate = personDto.BirthDate,
                PhoneNumber = personDto.PhoneNumber,
                StateId = personDto.StateId,
                CityId = personDto.CityId
            };

            _context.Persons.Add(person);
            _context.SaveChanges();
        }
        catch (Exception)
        {
            // if ERROR
            return BadRequest(ModelState);
        }

        // if SUCCESS
        return Ok($"{personDto.FirstName} {personDto.LastName} added to the database!");
    }

Фрагмент библиотеки My Fetch API :

"use strict";

function httpHelper() {        
    this.post = async function (url, data) {
        let response = await fetch(url, {
            method: "POST",
            headers: { "Content-type": "application/json" },
            body: JSON.stringify(data)
        });
        let resData = await response.json();

        return resData;
    }           
}

Answer 1

Эта проблема связана со следующим ответом: API выборки JS не работает с контроллерами ASP.NET Core 2 с атрибутом Authorize

Проблема в том, что fetch не отправляет данные аутентификации по умолчанию. Вы должны явно указать учетные данные: 'include' в запросе на выборку.

Поскольку вы не отправляете данные авторизации по умолчанию, сервер возвращает HTML, отображаемый для пользователя, когда действие пользователя не авторизовано. Этот HTML не может быть десериализован в JSON.