＆＃x27; http：// localhost：3000＆＃x27;已被CORS策略阻止：对飞行前请求的响应不会通过访问控制检查：

Question

我已经创建了一个API，并且在Webapiconfig.cs中具有以下内容：

var cors = new EnableCorsAttribute("http://localhost:3000", "*", "*");
config.EnableCors(cors);

我能够使用React应用程序访问它，但是我在其中一个控制器中创建了一个新方法并重新启动了API。当我通过发送邮政请求在Postman中测试它时，效果很好。但是，当我尝试使用React应用程序访问标题时，我现在会在标题中遇到错误。控制器中的所有其他方法都可以正常工作。正是这个引起问题的新方法是：

访问React

        const requestOptions = {
            method: 'post',
            headers: { "Content-type":"application/json",
                       "Accept":"*/*",
                       "Accept-Encoding":"gzip, deflate, br" },
            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());

vara和varc中的新方法只是一串逗号分隔的ID，而VARB只是一个整数。

从同一控制器起作用的一个

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

这里的vara和varb只是整数。

我曾尝试添加额外的标头，但似乎没有起作用，还尝试添加[enablecors（origins：“ http：// localhost：3000”，标题：“*”，方法：方法： “*”）]进入控制器，但这也无济于事。

我注意到，如果我从控制器中的EditbyMultiDs方法中删除[System.Web.Mvc.htTppost]无效，因为什么都没有传递到身体中。

以下是控制器中两种方法的声明：

[System.Web.Mvc.HttpPost]
        public ActionResult EditByMultipleIDs(string varA, [FromBody] DTO model, int varB, string varC)
        { //... Do stuff}

[System.Web.Mvc.HttpPost]
        public ActionResult EditByID(int varA, [FromBody] DTO model, int varB)
        {//... Do stuff}

另外，当我打开Chrome中的链接时，我会得到：

我不确定这是否是因为身体数据丢失了，因此无法完成请求或什么，但是是的...

编辑1：正在提出的实际请求：

一般

Request URL: http://localhost:9074/Output/EditByMultipleIDs?varA=55279,55280&varB=3&varC=393,394
Request Method: OPTIONS
Status Code: 404 Not Found
Remote Address: [::1]:9074
Referrer Policy: strict-origin-when-cross-origin

响应标头

Access-Control-Allow-Headers: *
Access-Control-Allow-Methods: *
Access-Control-Allow-Origin: *
Cache-Control: private
Content-Length: 4500
Content-Type: text/html; charset=utf-8
Date: Mon, 04 Jul 2022 08:59:48 GMT
Server: Microsoft-IIS/10.0
X-AspNet-Version: 4.0.30319
X-Powered-By: ASP.NET
X-SourceFiles: =?UTF-8?B?QzpcVXNlcnNcbW5hemlyXERlc2t0b3BcQWZ0b25cUnVsZXMgRW5naW5lXFJ1bGVFbmdpbmVBUEkgLSBDb3B5XFJ1bGVFbmdpbmVBUElcT3V0cHV0XEVkaXRCeU11bHRpcGxlSURz?=

请求标头

Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: en-GB,en-US;q=0.9,en;q=0.8
Access-Control-Request-Headers: content-type
Access-Control-Request-Method: POST
Connection: keep-alive
Host: localhost:9074
Origin: http://localhost:3000
Referer: http://localhost:3000/
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-site
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36

Answer 1

我在这里找到了解决方案：处理cors fllight preflight请求到ASP。 net MVC操作

只需要添加：

protected void Application_BeginRequest()
{
    if (Request.Headers.AllKeys.Contains("Origin", StringComparer.OrdinalIgnoreCase) &&
        Request.HttpMethod == "OPTIONS") {
        Response.Flush();
    }
}

中global.asax文件，以便每当获得选项请求时发送空响应