React JS + Azure MVC：进行 API 调用时 POST 404（未找到）答案

【问题标题】：React JS + Azure MVC: POST 404 (Not Found) when making API callReact JS + Azure MVC：进行 API 调用时 POST 404（未找到）
【发布时间】：2020-09-06 06:03:32
【问题描述】：

我正在从我的 React 应用程序向 Azure MVC 控制器发出 POST API 调用。但是，当我这样做时，我在控制台中收到以下错误：

POST http://localhost:3000/api/SampleData/AcknowledgeRole 404（不是找到）

考虑到我在 Azure MVC 控制器中指定了 Route，这看起来很奇怪。下面是我的控制器：

namespace Microsoft.IT.Security.OneAuthZUI.Controllers
{
    using System;
    using System.Collections.Generic;
    using System.Configuration;
    using System.IdentityModel.Tokens.Jwt;
    using System.IO;
    using System.Linq;
    using System.Threading.Tasks;
    using Microsoft.AspNetCore.Authorization;
    using Microsoft.AspNetCore.Cors;
    using Microsoft.AspNetCore.Mvc;
    using Microsoft.Azure.Cosmos;
    using Microsoft.Azure.KeyVault;
    using Microsoft.Azure.Services.AppAuthentication;
    using Microsoft.Enterprise.Authorization.Client.Legacy;
    using Microsoft.Extensions.Configuration;
    using Microsoft.IT.Security.OneAuthZUI.WebServices;
    using Microsoft.IT.Security.OneAuthZUI.WebServices.Helpers;
    using Microsoft.Net.Http.Headers;

    ////[Authorize]
    [Route("api/[controller]")]
    [ApiController]
    [EnableCors("AllowSpecificOrigin")]
    public class SampleDataController : Controller
    {
        [HttpPost("[action]")]
        [Authorize]
        public void AcknowledgeRole(string acknowledgementInfo)
        {
            string[] components = acknowledgementInfo.Split("&");
            string assignmentId = components[0];
            string changeId = components[1];
            Console.WriteLine("assignmentId = " + assignmentId);
            Console.WriteLine("changeId = " + changeId);
        }
    }
}

下面是我调用 POST API 的函数：

  public roleAcknowledge(roleAssignmentId: string, changeId: string) {
    return function() {
      // Send a POST request to the controller, passing in the roleAssignmentId and the changeId
      var xhr = new XMLHttpRequest();
      xhr.open('POST', 'api/SampleData/AcknowledgeRole', true);
      xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');

      // Use concatenation to send multiple parameters
      var parameters = roleAssignmentId + "&" + changeId;

      xhr.send(parameters);
    }
  }

【问题讨论】：

网址显示 localhost 但您在 azure 上提及
@Sajeetharan 抱歉，我在本地运行代码，而不是在 Azure 上运行：D
你的控制器看起来没问题，你需要把你的方法参数装饰成void AcknowledgeRole([FromQuery]string acknowledgementInfo)。不要在查询字符串中使用'&'作为分隔符来连接2个字符串，而是使用不同的分隔符，因为'&'是一个特殊的字符分割查询字符串，'&'之后的字符串将被视为下一个查询字符串项。跨度>

标签： javascript c# reactjs redux

【解决方案1】：

尝试像这样更改函数，

   [HttpPost]
   [ActionName("AcknowledgeRole")]
   [Authorize]

【讨论】：

不幸的是，我仍然收到以下错误：localhost:3000/api/SampleData/AcknowledgeRole 404 (Not Found)
你也不必在控制器中再次定义路由
可以调试一下吗？

【解决方案2】：

我刚刚尝试使用[HttpPost("[action]")]，它确实有效，这是我以前不知道的，因为我通常使用[Route] 属性。我猜您面临的问题与您的 cors 设置有关。不确定您如何配置cors，但由于您只是在本地主机上运行您的应用程序，请尝试将其配置为允许任何并查看它是否可以工作。请确保不要将其部署到生产环境中。

services.AddCors(o => o.AddPolicy("AllowAnyPolicy", builder => builder
                .AllowAnyOrigin()
                .AllowAnyMethod()
                .AllowAnyHeader()));

或者，暂时删除[EnableCors("AllowSpecificOrigin")]。

【讨论】：