为啥 Bootstrap 试图在 Edge 中加载 LESS 文件？

Posted 2023-03-06

【中文标题】为啥 Bootstrap 试图在 Edge 中加载 LESS 文件？

【英文标题】：Why is Bootstrap trying to load LESS files in Edge?为什么 Bootstrap 试图在 Edge 中加载 LESS 文件？

【发布时间】：2016-05-10 14:38:01

【问题描述】：

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

【问题讨论】：

他们很可能尝试添加对 CSS 源映射的支持，但尚未完善此功能。 （除非在您实际打开其样式表调试器/检查器之前，它实际上并没有尝试请求这些文件）。

P.S.显然，“他们”是指 MS，而不是 Bootstrap。

Edge 在 F12 工具通过外观打开时请求文件。 Chrome 不会发出请求，直到较少的文件被导航到。 Chrome 工具也会出现 403，但似乎不会在网络选项卡上报告 403。你只会得到一个空白的 .less 文件。 Edge 行为可能是我更喜欢的行为，因为使用 Chrome 很容易没有意识到你有问题。

【参考方案1】：

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

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

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

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

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

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

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

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

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

【讨论】：

谢谢马丁。此问题 (#629) 已在 GitHub 上解决。

快速修复可能是（在网站的实时版本上）重命名文件'bootstrap.min.css.map'（例如'disabled-bootstrap.min.css.map'）和在同一文件夹中放置一个名为“bootstrap.min.css.map”的空文件。就我而言，这似乎是一个快速而肮脏的解决方案。

【参考方案2】：

MaxCDN 本身存在一个已知问题。 （还有CDNjs）

记录的问题供参考：

https://github.com/MaxCDN/bootstrap-cdn/issues/671 - 此问题已作为重复问题关闭

https://github.com/MaxCDN/bootstrap-cdn/issues/629 - 已知错误

https://github.com/twbs/bootstrap/issues/19063 - Twitter 引导程序的未解决问题

CDN 分析：

对于sourceMappingURL（对于bootstrap file，bootstrap.min.css.map），任何.less 扩展文件（例如this file）都无法加载HTTP 状态403（禁止）。

Chrome 在开发者控制台中解决了这个问题，但 Edge 没有。 访问 .less 文件时的问题可以通过访问 this 链接来重现。

这个问题不仅存在于MaxCDN，也存在于CDNjs。 CDNjs 的链接是this,this & this