如何使用 html 音频元素安全地流式传输音频文件答案

【问题标题】：How to securely stream audio file using html audio element如何使用 html 音频元素安全地流式传输音频文件
【发布时间】：2018-08-18 03:49:16
【问题描述】：

我有 .net 核心后端，它具有 REST api 端点，用于下载上传的 mp3 文件。我喜欢音频元素功能，因为它一旦获得足够的数据就开始播放，所以我不想单独下载整个文件。我的前面是用 Angular 5 完成的。我的其他 API 端点使用 JWT 令牌身份验证，因为我可以手动将 JWT 设置为 Header，但是当我使用音频元素时，音频元素本身会进行 API 调用，我无法将 Header 添加到请求中。

<audio height="40" id="audio1" preload="auto" style="visibility: hidden" type="audio/mpeg" src="api/audio/2269" >
</audio>

当我从我的 REST API 所在的同一来源为我的前端提供服务时，当我使用 cookie 身份验证时，这很有效。但现在我计划将前端移动到其他云，然后我意识到不知何故 cookie 只在同一个域上工作。我检查我什至没有从不同的域获取 cookie 到我的浏览器。

所以我的问题是我可以在使用 html 音频元素时以某种方式使用 JWT 令牌对用户进行身份验证吗？或者我可以在 .net Core 2 中以某种方式配置 cookie 身份验证以允许不同的域。我找到了这个 Cookie.Domain here，但我不确定它是否适用于此。

这是我当前在 .net core 中的 cookie 配置。

services.AddAuthentication(CookieAuthenticationDefaults.AuthenticationScheme)
            .AddCookie(CookieAuthenticationDefaults.AuthenticationScheme, options => 
            {
                options.Cookie.Name = "access_token";
                options.LoginPath = "/login";
                options.LogoutPath = "/login";
            })
            .AddJwtBearer(options => 
            {
                options.TokenValidationParameters = tokenValidationParameters;
            });

【问题讨论】：

标签： angular cookies .net-core jwt html5-audio

【解决方案1】：

所以我发现了我的问题，是 Azure 的 CORS 设置在 .net 核心中弄乱了我的 CORS 设置。我在 Azure 中删除了它们，然后我的 .net 核心 CORS 设置正确。这是我的第二个问题：How to configure .net core to send authentication cookies to different domain

【讨论】：