CORS POST 请求不起作用 - 选项（错误请求） - 不允许来源

Question

我在获取跨域 POST 请求以访问最新 beta 2 版本中的 Api 控制器时遇到了很多麻烦。

Chrome（和其他浏览器）吐槽：

OPTIONS http://api.hybridwebapp.com/api/values 400 (Bad Request)
POST http://api.hybridwebapp.com/api/values 404 (Not Found) 

它可能与 this issue 有关，但我已经应用了该解决方法和其他几个修复程序，例如 web.config additions here

我一直在努力解决这个问题，所以我创建了一个解决方案来准确地重现这个问题。

加载网络应用程序会有 2 个按钮，一个用于 GET，一个用于 POST，响应将显示在按钮旁边。 GET 工作。无法让 POST 成功返回。

我可以从 Fiddler 那里得到原因的提示，但这没有任何意义，因为如果您查看响应，它确实在 Access-Controll-Allow-Origin 标头中包含域：

解决方案中有一个名为“ConfigurationScreenshots”的文件夹，其中包含一些 IIS 配置（网站绑定）和项目属性配置的屏幕截图，以便尽可能轻松地帮助我:)

编辑：不要忘记将此条目添加到主机文件 (%SystemRoot%\system32\drivers\etc)：

 127.0.0.1     hybridwebapp.com  api.hybridwebapp.com

**STATUS: ** 似乎某些浏览器（例如 Chrome）允许我继续 POST，而不管 OPTIONS 响应中的错误消息如何（而其他浏览器（例如 Firefox）则不允许）。但我认为这还没有解决。

查看它所拥有的 OPTIONS 请求的 Fidler 截图

访问控制允许来源：http://hybridwebapp.com

还有错误：

来源http://hybridwebapp.com是不允许的

这完全矛盾，就好像它忽略了标题一样。

Answer 1

好的，我已经解决了这个问题。这一定是我遇到过的最奇怪的问题。以下是如何“解决”它：

1. 继续像往常一样生活，直到突然无处可去对该域的 OPTIONS 请求开始返回 200 OK（而不是 400 Bad Request）并且 POST 永远不会发生（或者至少看起来没有'不是因为浏览器吞下了它）
2. 意识到 Fiddler 的 OPTIONS 响应神秘地包含“Access-Control-Allow-XXX”的重复项。
3. 尝试从您的 web.config 中删除以下语句，即使您清楚地记得尝试修复之前的问题但它不起作用：

删除这个：

    <httpProtocol>
       <customHeaders>
         <remove name="X-Powered-By" />
         <add name="Access-Control-Allow-Origin" value="http://mydomain.com" />
         <add name="Access-Control-Allow-Headers" value="Accept, Content-Type, Origin" />
         <add name="Access-Control-Allow-Methods" value="GET, PUT, POST, DELETE, OPTIONS" />
       </customHeaders>
    </httpProtocol>

因为你已经有了这个：

 var enableCorsAttribute = new EnableCorsAttribute("http://mydomain.com",
                                                   "Origin, Content-Type, Accept",
                                                   "GET, PUT, POST, DELETE, OPTIONS");
        config.EnableCors(enableCorsAttribute);

道德：你只需要一个。

Answer 2

如果您使用 OAuth 授权 。请求不直接转到 web api。您需要为该端点启用 OWIN CORS 支持。

我在我的网站上的表现： 安装 owin cors

Install-Package Microsoft.Owin.Cors

注意：请勿使用：Install-Package Microsoft.AspNet.WebApi.Cors

在文件 Startup.Auth.cs 中

 //add this line
            app.UseCors(Microsoft.Owin.Cors.CorsOptions.AllowAll);

            // Enable the application to use bearer tokens to authenticate users
            app.UseOAuthBearerTokens(OAuthOptions);

Answer 3

我有一个 MVC 控制器（不是 ApiController），但我提出的解决方案可能对其他人有所帮助。为了允许跨域访问控制器上的 POST 操作 (/data/xlsx)，我实施了 2 个操作：

1. 用于飞行前检查
2. 发帖

如果您没有 HttpOptions 操作，那么您会在飞行前检查中得到 404。

代码：

[HttpOptions]
public ActionResult Xlsx()
{
    // Catches and authorises pre-flight requests for /data/xlsx from remote domains
    Response.AddHeader("Access-Control-Allow-Origin", "*");
    Response.AddHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    Response.AddHeader("Access-Control-Allow-Methods", "GET, PUT, POST, DELETE, OPTIONS");
    return null;
}

[HttpPost]
public ActionResult Xlsx(string data, string name)
{
    Xlsx(); // Add CORS headers

    /* ... implementation here ... */
}

我已经在 IE 11、Chrome、FireFox 中对其进行了测试。

Answer 4

将此添加到 ConfigureOAuth 内的 startup.cs 文件中

app.UseCors(Microsoft.Owin.Cors.CorsOptions.AllowAll);

Answer 5

尝试在您的响应标头中添加以下代码：

Response.AddHeader("Access-Control-Allow-Origin", "*");