css - 为什么 Bootstrap 尝试在 Edge 中加载 LESS 文件？

Question

我有一个使用 Twitter Bootstrap 的网页。它在 Chrome、Firefox 和 Safari 中运行良好。但是，当我尝试在 Windows 10 的 Edge 中查看它时，我收到一堆 403 错误，提示它无法从 Bootstrap CDN 加载大量 .less 文件。如果浏览器不能对它们执行任何操作，为什么要请求 .less 文件？我根本没有使用 LESS，只是简单的 CSS3，它渲染得很好。我该如何停止？

Answer 1

好消息是这不会影响网站的普通用户。坏消息是这在某种程度上也在 Chrome 中发生，只是 Chrome 中的网络选项卡没有报告 403 错误。

在您链接到的 CSS 文件中，文件底部有一行:

/*# sourceMappingURL=bootstrap.min.css.map */

这是源映射，并提供指向用于生成浏览器中缩小的 CSS 的所有源文件的链接。

在 Bootstrap 实例中，CDN 指向不存在的文件，例如 http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/less/scaffolding.less

源映射文件只有在您启用了源映射并且您的开发工具打开时才会被下载。 Edge 默认打开源映射，据我所知，没有办法关闭它们(但请记住，这只会在开发工具打开时发生，我已经使用 Fiddler 确认了这种行为)，所以当你按 f12 时，它是将尝试获取源映射文件。 Chrome 的工作方式略有不同，它会下载源映射，但在您导航到源文件之前不会尝试下载 .less 文件。

如果其中一个 .less 文件返回 403 禁止响应，则 Edge 在网络选项卡中报告此情况。 Chrome 不会。

如果您使用 Fiddler 之类的 http 调试器，您会看到 Chrome 确实请求了文件并且还收到了 403 响应，但是，它不会在网络选项卡上报告它。当使用 Fiddler 解决 https 问题时，我更改了 CSS 文件以指向非 https URL。例如:http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css

此问题的解决方法是修复源映射中的 403'ing 文件。我在 bootstrap maxcdn GitHub repro 上提出了一个问题:https://github.com/MaxCDN/bootstrap-cdn/issues/629