BrowserSync 与分析脚本导致错误
Posted
技术标签:
【中文标题】BrowserSync 与分析脚本导致错误【英文标题】：BrowserSync with analytics scripts causing errors 【发布时间】：2017-10-08 06:59:52 【问题描述】：我们的 html 中有 Google Analytics 和 Azure Application Insights 分析脚本，包括 Google Analytics。它们位于<head> 中的<script> 标签中。当我们使用 Browsersync 观看时，它们会导致错误，特别是使用 browser-sync-brunch，因为我们使用 brunch 作为我们的构建系统。然而，在观看时，这个错误会被打印到控制台两次（有趣的是我们有两个分析标签）：
XMLHttpRequest 无法加载 http://localhost:3000/browser-sync/socket.io/?EIO=3&transport=polling&t=1494358571902-4&sid=rhGMlOFa_MbRrYbLAAAD。预检响应中的 Access-Control-Allow-Headers 不允许请求标头字段 x-ms-request-id。
并且每隔几秒就会重复出现这个错误：
OPTIONS http://localhost:3000/browser-sync/socket.io/?EIO=3&transport=polling&t=1494358572782-5 400（错误请求）
OPTIONS http://localhost:3000/browser-sync/socket.io/?EIO=3&transport=polling&t=1494358572782-5 400（错误请求）
XMLHttpRequest 无法加载 http://localhost:3000/browser-sync/socket.io/?EIO=3&transport=polling&t=1494358572782-5。预检响应包含无效的 HTTP 状态代码 400
我相当肯定这些分析脚本会导致问题，因为使用 uBlock Origin 阻止它们可以正常工作。
我想知道这是否与这些脚本标签在 Browsersync 标签被注入之前有关（直接在<body> 标签内，请参阅documentation）。但是将它们移到 <body> 标记的末尾并不能解决问题。
是什么原因造成的，如何缓解？
【问题讨论】：
这是否发生在实时服务器上，'localhost' 使这看起来像是在某种类型的奇怪配置的测试环境中运行它。一些远程的东西可能希望从它链接到的域中运行。由于您对所有这些杂乱无章的第三方 js 事物的控制权完全为零，因此真正的问题是，这些错误集是否真的会影响页面上的功能，或者只是滚动时出现的错误。我们的网站使用了一些 3rd 方的东西，它们往往会吐出各种错误，但我忽略了它们，因为我无法修复它们的错误代码。 “我们的 HTML 中的一些分析脚本” - 我实际上会否决这个问题，因为你说你正在运行一些未知的东西，加上分析，然后你问是什么原因造成的。您必须提供所有数据，您正在使用的所有工具，可能有人已经看到这些错误附加到特定的分析工具，但我总是尽量避免运行多个 anatyics 3rd 方 js 库，因为它们都非常具有侵入性并且不能被期望与其他人一起玩得很好。 localhost 的事情也很可疑，这让我觉得这是因为该工具链接到一个域。 @Lizardx 我在开发代码时正在运行本地服务器。我已经更新了它，因为我们正在使用 Google Analytics 和 Azure Application Insights。 【参考方案1】：注意：这不是“答案”，但太长了，不能作为评论。
使用 Firefox Web 开发人员工具栏的 javascript 控制台调试器和 Chrome 的，我检查了我们使用 google 分析的页面，我相信您可以在很大程度上将 google 分析从可疑列表中排除，他们的 js 通常做得很好。
您的错误也都清楚地指向浏览器同步，所以这可能是罪魁祸首。但是，您的本地开发站点值得怀疑，您为什么不为其创建适当的虚拟主机，而不使用 localhost？我对浏览器同步一无所知，所以我会注意这一点以排除您的情况的可能性。
我怀疑您的实时站点是作为本地主机运行的，因此您可能需要更正该问题以消除可能出现细微差异的点。我总是尝试在我所做的任何站点上使用尽可能接近实时生产的所有内容，这意味着您永远不会在站点的实际运行代码中的任何地方看到 localhost，您会看到该站点的开发或真实域名，例如：http://our-dev-site/ 或其他任何名称。
【讨论】：
以上是关于BrowserSync 与分析脚本导致错误的主要内容，如果未能解决你的问题，请参考以下文章
从 Package.json 脚本运行 BrowserSync 时出错
Gulp Browsersync会在每次文件更改时导致多次重新加载
没有 gulp 的 Express 和 BrowserSync？