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

问题描述

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

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

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

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

服务器正常返回 JSON。

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

有效的代码（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 库片段：

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

标签： javascriptjqueryajaxasp.net-web-apifetch-api

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

问题描述

解决方案

推荐阅读