Заголовок CORS, если файл HTML загружается через файл: ///foo.html? - PullRequest
0 голосов
/ 28 сентября 2018

Я хотел бы использовать jquery в HTML-файле, который я открываю с помощью протокола file:, например:

file:///path/to/file.html

Я включаю jquery в этот HTML-код следующим образом:

<script
    src="https://code.jquery.com/jquery-3.3.1.min.js"
    integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
    crossorigin="anonymous"></script>

Мой браузер (Firefox) сообщает мне, что отсутствуют заголовки CORS:

https://developer.mozilla.org/de/docs/Web/HTTP/CORS/Errors/CORSMissingAllowOrigin

Было бы здорово, если бы я мог разрабатывать с HTML из файла: // иJQuery из CDN.

Один из вариантов использования для образования.Если вы можете создать HTML и протестировать его по протоколу file: (загрузка jquery из CDN), тогда начальные издержки для новичков будут намного ниже (по крайней мере, я так думаю, но, возможно, я что-то упускаю).

Ответы [ 2 ]

0 голосов
/ 21 октября 2018

Я добавил это только потому, что страница jquery сказала мне сделать это:

  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
    crossorigin="anonymous">

Все, что я хочу, это проверить мой HTML, включая jquery, через file:/// и решение, и ответить на вопросэто очень просто: просто не используйте integrity="..., и это работает.

Мой HTML теперь содержит это:

 <head>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

И игра с помощью file:/// работает.

Я вижу, что есть большая разница в версии jquery.Но сейчас мне все равно.

Выше HTML с этой страницы: http://jqueryui.com/accordion/#collapsible

0 голосов
/ 08 октября 2018

Если ваша проблема - запись, используйте один из множества доступных инструментов скриптов.

jqfiddle содержит html, css и jquery часть, которую вы можете заполнить. Она должна поддерживать всеосновные примеры, которые вам нужны, а также некоторые продвинутые.Но поскольку мы говорим «начальный уровень», этого должно быть достаточно, чтобы показать, на что вы способны.А затем перейдите к тому, как настроить все это локально или на сервере позже.

Вы также можете просто настроить один сервер с пользовательскими папками, которые они могли бы также выгружать локально через ftp, а затем разместить эти пользовательские папки (для этого потребуетсяоднако вам нужно больше настроек).

Или используйте что-то вроде github pages для размещения контента.Привлечение студентов, которые хотят изучать код, участвующих в такой платформе, как github, также отлично подходит для изучения и изучения.

Обновление: После того, как ОП ответили на его собственный вопрос, я хотел узнать, чтоФактическая проблема была в этом ответе:

  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous">

Выше было добавлено к тегу, в который был загружен файл.

Эта функция безопасности, используемая при загрузке внешних ресурсов, называется: Subresource Integrity

Содержимое атрибута целостности должно соответствовать хэшу, сгенерированному из загружаемого файла, и действительно используется только тогда, когда ваш код и ресурс находятся в разных местах (Cross Origin).защищает ваш сайт от изменения файла на стороннем сайте.

Хеш гарантирует, что вы ожидаете, что код загружается от стороннего, если он изменил (был взломан) кодне будет выполняться на вашей странице.

Так что в вашем локальном случае вам придется сгенерировать новый хеш из содержимого файла,каждый раз, когда ваш код изменяется и помещается в атрибут целостности, это не имеет смысла, если ресурсы находятся в одном месте, поскольку злоумышленник может просто изменить ваш сайт вместо действительного файла сценария.

Дальнейшее обновление: Если вы хотите протестировать что-либо из файла, это может быть возможно с помощью простого html-файла, подобного следующему, он также без проблем загружает скрипт из cdn с SRI.

<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.slim.js"
  integrity="sha256-fNXJFIlca05BIO2Y5zh1xrShK3ME+/lYZ0j+ChxX2DA="
  crossorigin="anonymous"></script>
</head>
<body>
<h1>Hello World!</h1>

<script type="text/javascript">
  $("body").append("<span>I was added from jquery script!</span>");
</script>

Сценарий копируется / вставляется непосредственно из фрагмента, предоставленного cdn jquery

...