Access-Control-Allow-Origin 在本地测试时的意外行为

Question

我是运行本地的 NGINX 网络服务器，我不明白为什么尽管响应中存在 access-control-allow-origin: www.site-A.test，但原始页面 www.site-B.test 仍然存在允许从来源 www.site-A.test.

加载资源

我预计 www.site-A.test 上的视频文件不会在 www.site-A.test 以外的任何地方播放。这不是我在当地观察到的行为。

这两个站点都在本地运行 macOS on NGINX 1.21.4 和 Docker 环境中。在 Firefox Developer Edition 95 中测试。

示例的复制
（我正在测试的实际主机）

nginx.conf

http {
    map $sent_http_content_type $cors {
        ~*video/ $scheme://$server_name;
    }
    # There are two more blocks that handle redirection to this server block
    server {
       listen 8443 ssl http2;
       listen [::]:8443 ssl http2;
       server_name www.nginx.test;

       # Access-Control-Allow-Origin
       add_header Access-Control-Allow-Origin $cors always;
    }
    # There are two more blocks that handle redirection to this server block
    server {
       listen 8443 ssl http2;
       listen [::]:8443 ssl http2;
       server_name www.nginx1.test;

       # Access-Control-Allow-Origin
       add_header Access-Control-Allow-Origin $cors always;
    }
}

端口8334是容器的端口。两个网站都监听 443 端口。
在这种情况下，每个 content-type: video/mp4 只能在资源来自的主机内共享。

www.nginx1.test

<html>
    <head></head>
    <body>
        <video width="320" height="240" controls>
             <source src="https://www.nginx.test/SampleVideo_1280x720_5mb.mp4" type="video/mp4">
        </video>
    </body>
</html>

GET 和响应 Headers 在 www.nginx1.test 的屏幕截图

Answer 1

您观察到的是预期行为。您的问题的前提是不正确的：您可以使用 <video> HTML 元素在您的页面中嵌入视频，而无需服务器明确允许您的来源。见 MDN's page about the Same-Origin Policy:

Here are some examples of resources which may be embedded cross-origin:

[...]

Media played by <video> and <audio>.

你做的案例need the resource to be CORS-enabled are limited to when you want to use the video within a <canvas> element。

如果你想阻止第三方网站嵌入视频，你可以在服务器端实现一些resource isolation policy。

Access-Control-Allow-Origin 在本地测试时的意外行为

Unexpected behaviour of Access-Control-Allow-Origin when tested locally

nginx

cors

html5-video

response-headers

docker