Question

当我在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。对预检请求的响应没有通过访问控制检查：否＆＃39;访问控制 - 允许 - 来源＆＃39;标头出现在请求的资源上。起源＆＃39; http://localhost:3000＆＃39;因此不允许访问。如果不透明的回复符合您的需求，请将请求的模式设置为“无人”状态。在禁用CORS的情况下获取资源。

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

Answer 1

问题是第二个网址中的尾部斜杠。将其更改为此并且有效：

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

Answer 2

您是否尝试将空白空间移至Access-Control-Allow-Methods（如

）

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

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

2 个答案: