Открытие html-файла локально без работающего сервера не дает возможности загрузить видеофайл
У меня есть html-файл. В этот html-файл я встроил видеофайл, используя теги <video> и <source>.
При открытии этого html-файла локально (без работающего сервера) нет возможности загрузить видеофайл, но открытие того же html-файла через работающий сервер дает возможность загрузить видеофайл. Здесь я использую браузер Google Chrome для просмотра результатов. Я видел вкладку «Сеть» в инструментах разработки, но нет упоминания о http-заголовке размещения контента, установленном живым сервером. Каким-то образом это из-за http-заголовка содержимого? или по какой-то другой причине? Какова логика такого поведения?
Я видел подобное поведение при попытке загрузить ресурсы с использованием атрибута download элемента <a>. Здесь, в этом случае, если я открываю HTML-файл локально (без работающего сервера), браузер не загружает ресурсы, но если я открываю тот же HTML-файл через работающий сервер, браузер загружает ресурсы.
Ответы 1
1.) Что касается возможности загрузки видео:
Специальная опция загрузки видео — это функция, реализованная в браузере Google Chrome, и эта функция доступна только для браузера Chrome. Здесь, даже если вы откроете HTML-файл локально, дважды щелкнув его, эта специальная опция загрузки также будет доступна, поскольку видео, встроенное в HTML-файл, обслуживается через сервер.
2.) О том, как сделать ресурсы загружаемыми с помощью атрибута загрузки тега привязки <a>:
Источник определяется как комбинация схемы URI, имени хоста и номера порта. Теперь, когда мы открываем html-файл локально (без работающего сервера) по протоколу file:///, браузеры не могут определить источник, как по протоколу file:///, у него нет имени хоста и номера порта.
Политика одного и того же происхождения — это критически важный механизм безопасности в Интернете.
Браузеры имеют политику одинакового происхождения, и чтобы следовать этой политике, браузеры должны определять происхождение, а чтобы браузеры могли определять происхождение, нам нужно использовать веб-сервер, на котором файлы обслуживаются с использованием протокола https:// или http://. Теперь браузеры могут легко определить происхождение, и в соответствии с политикой браузера того же происхождения браузер решит, может ли пользователь загрузить ресурс или нет.
Для «http://www.example.com:80/» браузеры могут легко определить происхождение, поскольку веб-адрес содержит схему URI, имя хоста и номер порта.
Короче говоря, нам нужен хост (сервер). Теперь хост может находиться только по протоколу https:// или http://. Если мы используем хост, браузеры могут легко следовать политике одного и того же источника.
Современные браузеры обычно определяют происхождение загружаемых файлов с помощью file:///схема как непрозрачное происхождение. Это означает, что если файл включает другие файлы из той же папки (скажем), они не предполагаются происходить из одного и того же источника и может вызывать ошибки CORS.
Поэтому нам нужно использовать локальный хост, например живой сервер (расширение Visual Studio Code).