如何使用 WebAPI 制作 HTML5 视频标签、承载身份验证？答案

【问题标题】：How to make a HTML 5 video tag, bearer authenticated with a WebAPI?如何使用 WebAPI 制作 HTML5 视频标签、承载身份验证？
【发布时间】：2019-02-15 10:27:19
【问题描述】：

我有一个指向我的 ASP.NET WebAPI 的 HTML 5 视频标签，它需要不记名身份验证，我对我的 API 的大多数请求看起来像这样：

GET http://localhost:29080/api/v1/users/me HTTP/1.1
Host: localhost:29080
Connection: keep-alive
Accept: application/json, text/plain, */*
Origin: http://localhost:4200
Authorization: Bearer c66b36fe-fcc1-49da-9b42-dac783768a06
User-Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Safari/537.36
Referer: http://localhost:4200/
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9,fr;q=0.8

由于应用程序托管在不同的端口（最终是不同的地址）上，因此它受 CORS 约束。我已经将我的 WebAPI 设置为兼容：

config.EnableCors(new EnableCorsAttribute("*", "*", "*"));

遗憾的是，我的 HTML 5 视频标签似乎不适用于该设置。

<video 
      crossorigin="use-credentials"
      src="http://localhost:29080/api/v1/entities/470/presentation-video">

我最终得到：

Failed to load http://localhost:29080/api/v1/entities/470/presentation-video: 
The value of the 'Access-Control-Allow-Origin' header in the response must 
not be the wildcard '*' when the request's credentials mode is 'include'. 
Origin 'http://localhost:4200' is therefore not allowed access.

除了：

GET http://localhost:29080/api/v1/entities/470/presentation-video 401 (Unauthorized)

我真的不知道该怎么想，我在某处读到承载可以作为查询字符串传递，例如

但我无法让它工作......

有什么想法吗？

【问题讨论】：

该错误表示由于您询问 crossOrigin 凭据，因此响应中的允许通配符标头无效。也许你匿名会更幸运，但我不知道它与你的不记名物品有什么关系。
@Kaiido 在我的其他请求中，有一个允许身份验证的标头：授权：承载 c66b36fe-fcc1-49da-9b42-dac783768a06
stackoverflow.com/questions/21484982/… 不确定它是否会带我去某个地方
@Kaiido 说 401 未经授权 =/
@Kaiido 问题是

标签： javascript angular authentication asp.net-web-api cors

【解决方案1】：

好吧，我的解决方案是：

在我的前端应用中：

<video controls crossorigin="anonymous" src="..." </video>

并设置我的视频的src，例如（示例）：http://localhost:29080/api/v1/entities/470/presentation-video?access_token=c66b36fe-fcc1-49da-9b42-dac783768a06

由于 WebAPI 并没有真正检查查询参数（即使它们应该...），我们需要一种方法在接收 access_token 时将其转换为标头，如该答案中所述：https://stackoverflow.com/a/25525470/4636721

public void ConfigureAuth(IAppBuilder app)
{
    app.Use(async (context, next) =>
    {
        if (context.Request.QueryString.HasValue)
        {
            if (string.IsNullOrWhiteSpace(context.Request.Headers.Get("Authorization")))
            {
                var queryString = HttpUtility.ParseQueryString(context.Request.QueryString.Value);
                string token = queryString.Get("access_token");

                if (!string.IsNullOrWhiteSpace(token))
                {
                    context.Request.Headers.Add("Authorization", new[] { string.Format("Bearer {0}", token) });
                }
            }
        }

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

【讨论】：