React代理调用.NET API时带参数的POST/PUT/DELETE请求失败

环境信息 #

• React应用本地运行地址：http://localhost:8082/myapp
• .NET API本地IIS部署地址：http://foo.local.bar.com/myappapi

代理配置 #

为解决跨域CORS问题，在React应用的config.development.js中配置了如下代理：

devServer: {
    logLevel: 'debug',
    proxy: {
      '/myappapi/api/*': {
        target: 'http://foo.local.bar.com/',
        headers: {
          Cookie: ".MyCookie=12345"
        },
        logLevel: 'debug',
        secure: false,
        changeOrigin: true,
        withCredentials: true
      }
    },
  },

问题现象与排查结果 #

GET请求可正常获取数据，但带参数的POST/PUT/DELETE请求出现网关错误，生产环境无此问题。已完成以下排查：

• GET请求正常，代理配置无误；
• 无参数POST请求正常；
• 直接调用API（不通过代理）时，带参数POST请求正常。

服务器端代码示例 #

[Route("api/mycontroller/v1")]
[ApiController]
public class MyController : ControllerBase
{
    private readonly ILogger logger;
    private readonly IMyService myService;

    /// 构造函数
    public MyController (IMyService myService) // POST请求会触发此处断点
    {
        this.myService = myService; 
        logger = LogManager.GetCurrentClassLogger();
    }

    [HttpPost]
    [Route("PostSomething1")]
    [ProducesResponseType(StatusCodes.Status200OK)]
    [ProducesResponseType(StatusCodes.Status500InternalServerError)]
    public async Task<ActionResult> AddAsync(MyObjRequest myRequest)
    {
        // 代理模式下无法进入此方法
    }

    [HttpPost]
    [Route("PostSomething2")]
    [ProducesResponseType(StatusCodes.Status200OK)]
    [ProducesResponseType(StatusCodes.Status500InternalServerError)]
    public async Task<ActionResult> AddAsync2()
    {
        // 此方法正常但无法接收参数
    }
}

内容的提问来源于stack exchange，提问作者TamarG