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

Posted 2023-03-02

【中文标题】ASP.NET MVC 5 - jQuery AJAX 有效，Fetch API 无效

【英文标题】：ASP.NET MVC 5 - jQuery AJAX works, Fetch API doesn't

【发布时间】：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;
               

【参考方案1】：

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

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

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