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

Question

我有 .net 核心后端，它有用于下载上传的 mp3 文件的 REST api 端点。我喜欢音频元素功能，因为它一旦获得足够的数据就开始播放，所以我不想单独下载整个文件。我的前面是用 Angular 5 完成的。我的另一个 API 端点使用 JWT 令牌身份验证，因为我可以手动将 JWT 设置为 Header 但是当我使用 audio-element 时，音频元素本身进行 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;
            });

Answer 1

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

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

How to securely stream audio file using html audio element

cookies

html5-audio

jwt

.net-core

angular