ASP.NET WebAPI新增POST接口React调用报CORS预检404错误

你看到的CORS拦截是表象，核心原因是浏览器发起的OPTIONS预检请求直接返回了404 Not Found，请求根本没走到你配置的全局CORS处理逻辑，和CORS规则本身配置无关。
具体踩的两个核心问题：

• 特性用错了命名空间：你在Action上打的[System.Web.Mvc.HttpPost]是ASP.NET MVC的特性，不是ASP.NET Web API的对应特性。MVC的路由管道默认不响应OPTIONS请求，也不识别Web API专属的[FromBody]参数绑定规则，直接导致预检请求匹配不到对应Action，返回404。
• 前端请求加了冗余头：你在fetch配置里手动写了Accept-Encoding请求头，这个头是浏览器自动管控的，前端手动设置反而会干扰预检请求的校验逻辑。

你之前测试去掉[System.Web.Mvc.HttpPost]特性后能命中接口但model为null，刚好印证了这个问题：去掉MVC的请求方法限制后，管道能匹配到Action，但MVC管道不认Web API的[FromBody]标记，自然读不到请求体里的参数。

1. 替换错误的HttpPost特性
   把两个Action上的MVC版HttpPost特性，全部换成Web API命名空间下的版本，同时建议返回值用Web API专属的IHttpActionResult，避免不同命名空间下的类型冲突：

// 修改后的接口声明
[System.Web.Http.HttpPost]
public IHttpActionResult EditByMultipleIDs(string varA, [FromBody] DTO model, int varB, string varC)
{ 
    // 原有业务逻辑
}

[System.Web.Http.HttpPost]
public IHttpActionResult EditByID(int varA, [FromBody] DTO model, int varB)
{
    // 原有业务逻辑
}

替换后Web API管道会自动处理OPTIONS预检请求，走到你之前配置的全局CORS逻辑，不会再出现404。
2. 清理前端冗余请求头
删掉fetch配置里手动写的Accept-Encoding字段，保留必要的Content-Type和Accept即可：

const requestOptions = {
    method: 'POST',
    headers: { "Content-Type":"application/json", "Accept":"*/*" },
    body: JSON.stringify({ Data: this.props.data})
};
fetch(`http://localhost:9074/Output/EditByMultipleIDs?varA=${this.state.varA}&varB=${this.state.varB}&varC=${this.state.varC}`, requestOptions)
    .then(response => response.json());

3. 验证参数绑定
   你接口里的varA、varC是逗号分隔的字符串、varB是整数，Web API默认的查询字符串绑定规则可以直接识别，不需要额外修改路由配置。

改完上述配置后重启API服务，再抓包就能看到OPTIONS请求返回200状态码，响应头携带正确的CORS字段，POST请求可以正常调用，请求体的DTO参数也能正常绑定。

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