为什么无法在我的本地apache2服务器中加载js文件？

Question

在我的本地域名的网页中,两者
jq.src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js";
jq.src = http://127.0.0.1/js/jquery-3.3.1.min.js
都可以加载.

在stackoverflow的网页中,右键单击进入chrome的inspect - console.

const jq = document.createElement('script');
jq.src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js";
document.head.appendChild(jq);
jq.addEventListener('load', () => {
  console.log("hello world");
  console.log($ === jQuery);
});

可以加载远程jquery.js文件,现在用本地js文件替换它http://127.0.0.1/js/jquery-3.3.1.min.js.
为什么无法在我的本地apache2中加载js文件？

Answer 1

您正在访问的站点可以应用 javascript 的安全策略 - 其中包括调试器。我认为您所看到的是与您正在访问的网页关联的内容安全策略的应用。

您可以在页眉中看到这一点。在 Chrome 中（如此处所述），您可以查看随页面发送的 html 标头：

打开开发者面板，选择“网络”选项卡，然后重新加载页面。

对于 stackoverflow，请在“名称”列下查找“stackoverflow.com” - 如果您最初通过 http 加载它，则可能有两个，因此找到 https 的那个 - 可能是第二个。单击该选项，然后选择右侧的“标题”选项卡。您将在响应标头中看到：

content-security-policy: upgrade-insecure-requests

这里对此进行解释。

基本上，它告诉浏览器所有 http 请求都应该“升级”为 https。因此，当您尝试访问 时http://127.0.0.1/...，您的浏览器会将请求升级为https://127.0.0.1/...，而您的本地服务器可能未设置为处理该请求。

这不仅限于 Chrome——所有现代浏览器都应该这样做。

例如，我使用 Safari 浏览了一些网站，并且在某些情况下收到错误消息，例如在GitHub上：

Refused to load https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js because
it does not appear in the script-src directive of the Content Security Policy.

这是您可以在此处阅读的另一种内容安全策略。