CORS 预检请求在 Azure 托管 Web API 中通过 302 重定向进行响应

设想：

我有两个分别托管在 Windows Azure 上的 ASP.NET Web 应用程序，并且都与同一个 Azure Active Directory 租户关联：

1. 具有 AngularJS SPA 前端的 MVC 应用程序和adal.js https://github.com/AzureAD/azure-activedirectory-library-for-js用于在客户端上处理 Azure AD 身份验证的库。

2. 带有 Microsoft OWIN 中间件的 Web API，用于处理服务器上的 Azure AD 身份验证。

Problem:

当 Angular 引导客户端应用程序时，页面在经过 oauth 重定向到正确的身份验证机构后正确加载，并且 adal.js 库正确检索并存储每个应用程序的不同令牌（通过检查 Chrome 开发工具中的资源/会话存储选项卡进行验证）。但是，当客户端应用程序尝试访问或更新 API 中的任何数据时，CORS 预检请求将通过 302 重定向响应到身份验证机构，这会导致控制台中出现以下错误：

XMLHttpRequest 无法加载https://webapi.azurewebsites.net/api/items https://webapi.azurewebsites.net/api/items。 请求被重定向到 'https://login.windows.net/ https://login.windows.net/{authority-guid}/oauth2/authorize?response_type=id_token&redirect_uri=....等..等..', 对于需要预检的跨源请求，这是不允许的。

示例标头（匿名）：

Request
OPTIONS /api/items HTTP/1.1
Host: webapi.azurewebsites.net
Connection: keep-alive
Access-Control-Request-Method: GET
Access-Control-Request-Headers: accept, authorization
Origin: https://mvcapp.azurewebsites.net
User-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.99 Safari/537.36
Accept: */*
Referer: https://mvcapp.azurewebsites.net/

Response
HTTP/1.1 302 Found
Content-Length: 504
Location: https://login.windows.net/{authority-guid}/oauth2/authorize?response_type=id_token&redirect;_uri=https%3A%2F%2F....etc..etc.%2F&client;_id={api-guid}&scope;=openid+profile+email&response;_mode=form_post&state;=...etc...
Server: Microsoft-IIS/8.0
X-Powered-By: ASP.NET
Set-Cookie: ARRAffinity=4f51...snip....redact....db6d;Path=/;Domain=webapi.azurewebsites.net  

我所做的/尝试过的

1. 确保 Azure AD 租户允许 OAuth2 隐式流，如所述here http://www.cloudidentity.com/blog/2014/10/28/adal-javascript-and-angularjs-deep-dive/和其他地方。
2. 确保 API公开访问权限 https://msdn.microsoft.com/en-us/library/azure/dn132599.aspx#BKMK_Exposing并且 MVC/SPA寄存器访问 https://msdn.microsoft.com/en-us/library/azure/dn132599.aspx#BKMK_Accessing使用这些公开的权限。
3. 在 API 的 web.config 中显式添加了 OPTIONS 动词处理程序（见下文）。
4. 在 API 服务器、OWIN 本身以及 EnableCorsAttribute 上使用了启用 CORS 的各种组合（见下文）。

问题

有没有办法让与 Azure AD 租户关联的 Web API 不重定向 CORS 预检请求？ 我是否缺少 adal.js 库和/或 OWIN 启动代码中的一些初始化设置（见下文）？ Azure 门户中是否有允许 OPTIONS 请求通过 OWIN 管道的设置？

相关代码：

adal.js 初始化

angular.module("myApp", ["ngRoute", "AdalAngular"])

.config(["$routeProvider", "$locationProvider", "$httpProvider", "adalAuthenticationServiceProvider",
    function ($routeProvider, $locationProvider, $httpProvider, adalProvider) {

        $routeProvider.when("/", { // other routes omitted for brevity
            templateUrl: "/content/views/home.html",
            requireADLogin: true // restrict to validated users in the Azure AD tenant
        });

        // CORS support (I've tried with and without this line)
        $httpProvider.defaults.withCredentials = true;

        adalProvider.init({
            tenant: "contoso.onmicrosoft.com",
            clientId: "11111111-aaaa-2222-bbbb-3333cccc4444", // Azure id of the web app
            endpoints: {
                // URL and Azure id of the web api
                "https://webapi.azurewebsites.net/": "99999999-zzzz-8888-yyyy-7777xxxx6666"
            }
        }, $httpProvider);
    }
]);

OWIN中间件初始化

public void ConfigureAuth(IAppBuilder app)
{
    // I've tried with and without the below line and also by passing
    // in a more restrictive and explicit custom CorsOptions object
    app.UseCors(CorsOptions.AllowAll);

    app.UseWindowsAzureActiveDirectoryBearerAuthentication(
        new WindowsAzureActiveDirectoryBearerAuthenticationOptions
        {
            TokenValidationParameters = new TokenValidationParameters
            {
                // Azure id of the Web API, also tried the client app id
                ValidAudience = "99999999-zzzz-8888-yyyy-7777xxxx6666"
            },
            Tenant = "contoso.onmicrosoft.com"
        }
    );

    // I've tried with and without this
    app.UseWebApi(GlobalConfiguration.Configuration);
}

WebApiConfig 初始化

public static void Register(HttpConfiguration config)
{
    // I've tried with and without this and also using both this
    // and the OWIN CORS setup above. Decorating the ApiControllers
    // or specific Action methods with a similar EnableCors attribute
    // also doesn't work.
    var cors = new EnableCorsAttribute("https://mvcapp.azurewebsites.net", "*", "*")
    {
        cors.SupportsCredentials = true // tried with and without
    };
    config.EnableCors(cors);

    // Route registration and other initialization code removed
}

API 选项 动词处理程序注册

<system.webServer>
  <handlers>
    <remove name="ExtensionlessUrlHandler-Integrated-4.0" />
    <remove name="OPTIONSVerbHandler" />
    <remove name="TRACEVerbHandler" />
    <add name="OPTIONSHandler" path="*" verb="OPTIONS" modules="IsapiModule" scriptProcessor="C:\Windows\Microsoft.NET\Framework64\v4.0.30319\aspnet_isapi.dll" />
    <add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="*" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />
  </handlers>
</system.webServer>

相关资源

我曾经尝试过以下（以及更多）论坛和博客文章以及 github 示例代码中的几乎所有可以想象到的组合。

1. ADAL JavaScript 和 AngularJS – 深入探讨 http://www.cloudidentity.com/blog/2014/10/28/adal-javascript-and-angularjs-deep-dive/
2. 使用 Azure Active Directory、Owin 中间件和 ADAL 保护 ASP.NET Web API 2 http://bitoftech.net/2014/09/12/secure-asp-net-web-api-2-azure-active-directory-owin-middleware-adal/
3. 使用 ASP.NET Web API 2、Owin 和 Identity 进行基于令牌的身份验证 http://bitoftech.net/2014/06/01/token-based-authentication-asp-net-web-api-2-owin-asp-net-identity/
4. AzureADSamples/SinglePageApp-DotNet (github) https://github.com/AzureADSamples/SinglePageApp-DotNet
5. AngularJSCORS (github) https://github.com/matvelloso/AngularJSCORS
6. 如何在WebAPI 2中进行CORS身份验证？ https://stackoverflow.com/q/20079813/51242
7. WebApi 上的 AngularJS 和 OWIN 身份验证 https://stackoverflow.com/q/24461605/51242

我遇到了类似的问题来找出合适的软件包。只需要设置 Owin cors 即可。请先检查 owin.cors 的软件包。

<package id="Microsoft.Owin" version="3.0.0" targetFramework="net45" />
<package id="Microsoft.Owin.Cors" version="2.1.0" targetFramework="net45" />

处理程序的 Web 配置选项：

<system.webServer>
<handlers>
  <remove name="ExtensionlessUrlHandler-Integrated-4.0" />
  <remove name="OPTIONSVerbHandler" />
  <remove name="TRACEVerbHandler" />
  <add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="*" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />
</handlers>

您在 owin 配置中指定 cors 选项是正确的。

 public void ConfigureAuth(IAppBuilder app)
    {
        app.UseWindowsAzureActiveDirectoryBearerAuthentication(
            new WindowsAzureActiveDirectoryBearerAuthenticationOptions
            {
                Audience = ConfigurationManager.AppSettings["ida:Audience"],
                Tenant = ConfigurationManager.AppSettings["ida:Tenant"]

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

控制器不需要CORS相关属性。

   [Authorize]
public class ContactsController : ApiController
{

    // GET api/<controller>
    public IEnumerable<string> Get()
    {
        return new string[] { "person1", "person2" };
    }

    // GET api/<controller>/5
    public string Get(int id)
    {
        return "person" + id;
    }

WebAPIConfig 不需要 CORS 相关条目。

工作示例在这里：https://github.com/omercs/corsapisample https://github.com/omercs/corsapisample

您可以使用以下代码在您的应用程序中进行测试：

app.factory('contactService', ['$http', function ($http) {
var serviceFactory = {};

var _getItems = function () {
    $http.defaults.useXDomain = true;
    delete $http.defaults.headers.common['X-Requested-With'];
    return $http.get('http://yourhostedpage/api/contacts');
};

serviceFactory.getItems = _getItems;

return serviceFactory;

}]);

飞行前响应示例：

Remote Address:127.0.0.1:8888
Request URL:http://localhost:39725/api/contacts
Request Method:OPTIONS
Status Code:200 OK
Request Headersview source
Accept:*/*
Accept-Encoding:gzip, deflate, sdch
Accept-Language:en-US,en;q=0.8
Access-Control-Request-Headers:accept, authorization
Access-Control-Request-Method:GET
Host:localhost:39725
Origin:http://localhost:49726
Proxy-Connection:keep-alive
Referer:http://localhost:49726/myspa.html
User-Agent:Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.99 Safari/537.36
Response Headersview source
Access-Control-Allow-Credentials:true
Access-Control-Allow-Headers:authorization
Access-Control-Allow-Origin:http://localhost:49726
Content-Length:0
Date:Fri, 23 Jan 2015 01:10:54 GMT
Server:Microsoft-IIS/8.0
X-Powered-By:ASP.NET