ServiceStack、CORS 和 OPTIONS（无 Access-Control-Allow-Origin 标头）

Question

我们在 ServiceStack 4 中使用 RESTful API 的 CORS 功能遇到了一些障碍。

我们希望将 cookie 发送到 api，因为 SS 会话在 cookie 中，因此我们在命中 API 的 Angular 客户端中使用“WithCredentials”=true 进行 AJAX 调用。

由于 Chrome（至少）不喜欢带有 WithCredentials 的 Access-Control-Allow-Origin 通配符，我们添加了一个预请求过滤器以在 Access-Control-Allow-Origin 标头中回显请求者的来源，例如所以：

private void ConfigureCors()
            {
                Plugins.Add(new CorsFeature(
                    allowedHeaders: "Content-Type",
                    allowCredentials: true,
                    allowedOrigins: ""));

                PreRequestFilters.Add((httpReq, httpRes) =>
                {
                    string origin = httpReq.Headers.Get("Origin");
                    if (origin != null)
                    {
                        httpRes.AddHeader(HttpHeaders.AllowOrigin, origin);
                    }
                    else
                    {
                        // Add the dev localhost header.
                        httpRes.AddHeader(HttpHeaders.AllowOrigin, "http://localhost:9000");
                    }
                });

                PreRequestFilters.Add((httpReq, httpRes) =>
                {
                    //Handles Request and closes Responses after emitting global HTTP Headers
                    if (httpReq.Verb == "OPTIONS")
                    {
                        httpRes.EndRequest();
                    }
                });
            }

但是，我们遇到了 OPTIONS 请求的障碍，因为 SS 服务在请求结束时没有返回 Access-Control-Allow-Origin 标头。这会使 Chrome 拒绝来电。

我们尝试在 OPTIONS 的预请求过滤器中放置一个显式标头，但它仍然没有为 OPTIONS 调用返回 ACAO 标头：

 PreRequestFilters.Add((httpReq, httpRes) =>
            {
                //Handles Request and closes Responses after emitting global HTTP Headers
                if (httpReq.Verb == "OPTIONS")
                {
                    httpRes.AddHeader(HttpHeaders.AllowOrigin, "*");
                    httpRes.EndRequest();
                }
            });

这似乎以前必须处理过，但我们在 StackOverflow 上找不到类似的东西。

我们是否对 OPTIONS 预请求过滤器做错了什么？为什么它不返回 Access-Control-Allow-Origin 标头？

Answer 1

注意： 更新到 4.0.36 解决了下面描述的双标头问题，使第二个预请求过滤器过时。

我终于让它工作了，但感觉就像一个杂牌。

我按照 Demis 的建议添加了 allowOriginWhitelist 条目，它返回了标头 (Access-Control-Allow-Origin:http://localhost:9000) 的双倍值，至少对于 OPTIONS 调用（它似乎适用于 POST 和 GET）：

 Plugins.Add(new CorsFeature(
                    allowedHeaders: "Content-Type, Allow, Authorization",
                    allowCredentials: true,
                    allowOriginWhitelist: new[] { "http://localhost:9000", "http://www.productiondomain.com", "https://www.productiondomain.com" }));

所以我添加了以下预请求过滤器，基于我们之前使用的过滤器：

PreRequestFilters.Add((httpReq, httpRes) =>
                {
                    //Handles Request and closes Responses after emitting global HTTP Headers
                    if (httpReq.Verb == "OPTIONS")
                    {
                        string origin = httpReq.Headers.Get("Origin");
                        if (origin != null)
                        {
                            httpRes.AddHeader(HttpHeaders.AllowOrigin, origin);
                        }
                        else
                        {
                            // Add the dev localhost header.
                            httpRes.AddHeader(HttpHeaders.AllowOrigin, "http://localhost:9000");
                        }
                        httpRes.EndRequest();
                    }
                });

这已经解决了问题，但感觉就像一个杂牌。有谁知道为什么这个简单的代码会在响应中产生双倍的 ACAO 标头？

     Plugins.Add(new CorsFeature(
                    allowedHeaders: "Content-Type, Allow, Authorization",
                    allowCredentials: true,
                    allowOriginWhitelist: new[] { "http://localhost:9000", "http://www.productiondomain.com", "https://www.productiondomain.com" }));

Answer 2

您应该在allowOriginWhitelist 中添加列入白名单的域，例如：

Plugins.Add(new CorsFeature(allowedHeaders:"Content-Type",
    allowCredentials:true,
    allowOriginWhitelist:new[]{"http://localhost:9000"}));

在 v4.0.35 中引入了一个问题，PreRequestFilters were being written in Custom HttpHandlers 导致 CorsFeature 两次写出 Access-Control-Allow-Origin 标头，导致浏览器拒绝它。这个问题现在已经解决了in this commit，可以从 v4.0.36+ 获得，现在是available on MyGet。

此最新版本已部署到 http://test.servicestack.net 演示中，该演示在此 jsbin 中显示了使用 ServiceStack 进行跨域身份验证：http://jsbin.com/korijigucu/1/edit

<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <script>
    var apiBase = "http://test.servicestack.net";
    var app = angular.module('app', []);
    app.run(['$rootScope', '$http', function ($rootScope, $http) {  
      $rootScope.success = "running...";
      $http
         .post(apiBase + '/auth/credentials', 
             { "UserName": "test", "Password": "test" }, 
             { withCredentials: true })
         .success(function (data) {
             $rootScope.success = "Login successful: " + JSON.stringify(data);
         })
         .error(function (data, status, headers, config) {
             $rootScope.error = 'ERR:login';
         });
    }]);    
  </script>
</head>
<body>    
  <div style='color:green'>{{success}}</div>
  <div style='color:red'>{{error}}</div>
</body>
</html>

CorsFeature registration in above Test project的源代码：

Plugins.Add(new CorsFeature(
    allowOriginWhitelist: new[] { 
      "http://localhost", "http://localhost:56500", 
      "http://test.servicestack.net", "http://null.jsbin.com" },
    allowCredentials: true,
    allowedHeaders: "Content-Type, Allow, Authorization"));