CORS Header 如果 HTML 文件通过 file:///foo.html 加载？

Question

我想在我用 file: 协议打开的 HTML 文件中使用 jquery，如下所示：

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

我在这个 HTML 中包括 jquery 是这样的：

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

我的浏览器 (firefox) 告诉我，缺少 CORS headers：

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

如果我可以使用来自 file:// 的 HTML 和来自 CDN 的 jquery 进行开发，那就太好了。

一个用例用于教育。如果你可以创建一个 HTML 并通过 file: 协议测试它（从 CDN 加载 jquery），那么新手的初始开销要低得多（至少我这么认为，但也许我遗漏了一些东西）。

Answer 1

如果您的问题是输入，请使用众多可用的 fiddle 工具之一。

jqfiddle 有一个 html、css 和一个 jquery 部分你可以填写。它应该支持你需要的所有基本示例，还有一些高级.但是既然我们正在谈论 "entry level" 那么这应该足以展示您可以做什么。然后讨论如何在本地或稍后在服务器上设置所有这些。

您也可以只设置一个服务器，其中包含用户文件夹，他们也可以通过 ftp 在本地上传，然后托管这些用户文件夹（但这需要您进行更多设置）。

或使用 github pages 之类的内容来托管内容。让想要学习编码的学生参与 github 这样的平台，对于探索和学习也非常有用。

更新： 在 OP 回答了他自己的问题后，我想知道这个答案的实际问题是什么：

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

以上内容已添加到加载文件的标签中。

这是加载外部资源时使用的安全功能，称为：Subresource Integrity

完整性属性的内容需要与从正在加载的文件生成的哈希相匹配，并且实际上仅在您的代码和资源位于不同位置（跨源）时使用，它可以保护您的站点免受文件的影响在第三方网站上更改。

哈希确保您期望的代码是从第三方加载的代码，如果它已更改（被黑客入侵），代码将不会在您的页面上执行。

因此，在您的本地情况下，每次您的代码更改时，您都必须从文件内容生成一个新的哈希值，并将其放入完整性属性中，如果资源位于相同的位置，因为攻击者可以只修改您的站点而不是实际的脚本文件。

进一步更新： 如果你想从一个文件中测试一些东西，它应该可以使用一个简单的 html 文件，如下所示，它也可以毫无问题地从带有 SRI 的 cdn 加载脚本。

<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>

脚本 copy/pasted 直接来自 jquery's cdn

提供的片段

Answer 2

我添加了这个，只是因为 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

CORS Header 如果 HTML 文件通过 file:///foo.html 加载？

CORS Header if HTML file gets loaded via file:///foo.html?

jquery

cors

file-uri