ASP.NET MVC 5 - jQuery AJAX 有效，Fetch API 无效答案

【问题标题】：ASP.NET MVC 5 - jQuery AJAX works, Fetch API doesn'tASP.NET MVC 5 - jQuery AJAX 有效，Fetch API 无效
【发布时间】：2018-12-09 14:06:32
【问题描述】：

在我的 ASP.NET MVC 5 项目中，我使用 WebApi 设置了本地 API，并且在所有更改数据的 API 中使用 ASP.NET Identity 检查用户角色。当我使用 jQuery AJAX 向api/createPerson 发出 POST 请求时，它工作正常。但是，当我使用自己的 Fetch API 库时，服务器会返回登录页面的 HTML 而不是 JSON 数据。

如您所见，JSON 解析失败（因为它是 HTML 而不是有效的 JSON 代码）。

但是，如果我禁用 API 控制器中的代码块：

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

服务器正常返回JSON。

为什么当我使用 jQuery AJAX 请求时，我的 User.IsInRole("Admin") 检查返回 true，而当我使用 Fetch API 时它返回 false？

有效的代码（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!");
    }

我的 Fetch API 库 sn-p：

"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;
    }           
}

【问题讨论】：

标签： javascript jquery ajax asp.net-web-api fetch-api

【解决方案1】：

此问题与以下答案有关：JS Fetch API not working with ASP.NET Core 2 Controllers with Authorize attribute

问题是 fetch 默认不发送身份验证数据。您必须在获取请求中明确声明凭据：“包含”。

由于您默认不发送授权数据，因此当用户操作未经授权时，服务器会返回显示给用户的 html。这个html不能反序列化成json。

【讨论】：