在没有实时服务器的情况下在本地打开 html 文件不会提供下载视频文件的选项

Question

我有一个 html 文件。在该 html 文件中，我使用

<video>

和

<source>

标签嵌入了一个视频文件。 在本地打开此 html 文件（没有实时服务器）时，没有下载视频文件的选项，但通过实时服务器打开相同的 html 文件，可以选择下载视频文件。在这里，我使用谷歌浏览器查看输出。我在开发工具中看到了网络选项卡，但没有提到由实时服务器设置的内容配置 http 标头。不知何故，是因为内容配置http标头吗？或者因为任何其他原因？这种行为背后的逻辑是什么？

我在尝试使用

download

元素的

<a>

属性下载资源时看到了类似的行为。在这里，在这种情况下，如果我在本地打开 HTML 文件（没有实时服务器），则浏览器不会下载资源，但如果我通过实时服务器打开相同的 HTML 文件，则浏览器会下载资源。

Answer 1

源被定义为 URI 方案、主机名和端口号的组合。现在，当我们通过

file:///

协议在本地（没有实时服务器）打开 html 文件时，浏览器无法检测到通过

file:///

协议的来源，它缺少主机名和端口号。

同源策略是网络上的关键安全机制。

浏览器具有同源策略，为了遵循此策略，浏览器需要检测源并让浏览器检测源，我们需要使用使用

https://

或

http://

协议提供文件的 Web 服务器。现在，浏览器可以轻松检测来源，并根据浏览器的同源策略，浏览器将决定用户是否可以下载资源。

对于“

http://www.example.com:80/

”，浏览器可以轻松检测来源，因为网址包含 URI 方案、主机名和端口号。

综上所述，我们需要一个主机（服务器）。现在，主机只能通过

https://

或

http://

协议。如果我们使用主机，浏览器可以轻松遵循同源策略。

因此我们需要使用像实时服务器这样的本地主机（Visual Studio Code 扩展）。