多个 CORS 适用于 GET 但不适用于 PUT/POST 与飞行前请求 Web api 2

Posted 2023-03-04

【中文标题】多个 CORS 适用于 GET 但不适用于 PUT/POST 与飞行前请求 Web api 2

【英文标题】：Multiple CORS working for GET but not for PUT/POST with pre-flight requests Web api 2

【发布时间】：2018-03-24 10:14:24

【问题描述】：

当我在我的 Web.config 中配置 CORS 时，一切正常：

<customHeaders>
<add name="Access-Control-Allow-Origin" value="http://localhost:3000"/>
<add name="Access-Control-Allow-Methods" value="GET, PUT, POST, DELETE, HEAD, OPTIONS"/>
<add name="Access-Control-Allow-Headers" value="accept, cache-control, credentials, content-type, authorization, origin, X-Requested-With, X-dev-mode"/>
</customHeaders>

但是，当我尝试像这样启用多个 CORS 时：

// Filename: Global.asax.cs
protected override void Application_Start()

   ApiConfig.Register(GlobalConfiguration.Configuration);


// Filename: ApiConfig.cs
public static void Register(HttpConfiguration config)

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

它适用于 GET（即获取内容等），但是当使用 POST/PUT（即保存内容等）时，它会在浏览器（Chrome）控制台中出现此错误

Fetch API 无法加载 http://localhost:56214/api/1/content/SAVE。对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，Origin 'http://localhost:3000' 不允许访问。如果不透明的响应满足您的需求，请将请求的模式设置为“no-cors”以获取禁用 CORS 的资源。

请求在 OPTIONS 上失败。请注意，我确实有自定义处理程序，并且我的路线也已配置。 还要提一提的是，保存内容的 PUT/POST 调用是通过 react 进行的 ajax 调用。这可能是个问题吗？

【参考方案1】：

问题在于您的第二个网址中的尾部斜杠。把它改成这个就可以了：

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

【参考方案2】：

您是否尝试过删除 Access-Control-Allow-Methods 之类的空格

<add name="Access-Control-Allow-Methods" value="GET,POST,PUT,DELETE,OPTIONS" />