CSS，图像和脚本未在 chrome 中加载答案

【问题标题】：CSS, images and scripts not loading in chromeCSS，图像和脚本未在 chrome 中加载
【发布时间】：2015-07-08 17:10:08
【问题描述】：

大家好，

我的网站http://mothercitydesigns.com 在所有浏览器上看起来都不错，除了最新版本的 chrome canary 版本 45。我的 css、图像或脚本都没有加载。

查看开发人员工具，似乎它们正在使用

链接

https://

而不仅仅是

http://

这是一个问题，因为我没有 ssl 证书，并且我的 wp 常规站点设置被设置为显示

http://mothercitydesigns.com

我已经联系了我的房东，他们发现这不是服务器问题。

有什么想法吗？

【问题讨论】：

你已经知道你网站上的一些链接有 https:// ，那么就得改一下，这样网站才能正常工作。
它们是否也在其工作的浏览器中使用“https://”链接？目前正在研究这个问题，看看我是否可以重新创建它，但我必须说你的网站看起来非常棒。
嗨 Chandu，你不明白。请参阅 Suman Barick 的评论：它们是否也在其工作的浏览器中使用“https://”链接？不，Suman，工作浏览器使用 http:// 链接。顺便说一句，它的 Google Canary v. 45 与 https:// 链接。
感谢苏曼巴里克
不客气 :) 看起来像是 Chrome 金丝雀的问题。找到了这个code.google.com/p/chromium/issues/detail?id=350912 如果真的是这样的话，那么我想我们这边没有什么可做的，除了等待他们修复它。 :P

标签： php wordpress google-chrome

【解决方案1】：

这很可能与引入 HTTPS 升级标头 (HTTPS:1) 的已知问题有关。一些 wordpress 和 Joomla（很可能还有其他人）将其视为“将所有 URL 设为 HTTPS 期间”，而他们不应该这样做。 Chromium 跟踪器中存在一个错误，标准机构正在讨论如何处理重命名标题。在那之前，您应该慢慢禁用扩展以找到导致它的扩展，然后将其保持禁用状态。或者修复扩展中的问题并将补丁提交给作者，以便其他人也可以获得更新。

更新：

仔细查看输出，可以查看生成<head>以下部分的任何内容

<script type='text/javascript' src='https://www.mothercitydesigns.com/wp-includes/js/jquery/ui/jquery.ui.core.min.js?ver=1.10.4'></script>
<script type='text/javascript' src='https://www.mothercitydesigns.com/wp-includes/js/jquery/ui/jquery.ui.widget.min.js?ver=1.10.4'></script>
<script type='text/javascript' src='https://www.mothercitydesigns.com/wp-includes/js/jquery/ui/jquery.ui.mouse.min.js?ver=1.10.4'></script>
<script type='text/javascript' src='https://www.mothercitydesigns.com/wp-includes/js/jquery/ui/jquery.ui.slider.min.js?ver=1.10.4'></script>


<script type='text/javascript' src='http://www.mothercitydesigns.com/wp-content/plugins/woocommerce-currency-switcher/js/price-slider.js?ver=4.0.5'></script>
<script type='text/javascript' src='http://www.mothercitydesigns.com/wp-content/plugins/woocommerce-currency-switcher/js/front.js?ver=4.0.5'></script>


<script type='text/javascript' src='https://www.mothercitydesigns.com/wp-content/plugins/owl-carousel/js/owl.carousel.js?ver=4.0.5'></script>
<script type='text/javascript' src='https://www.mothercitydesigns.com/wp-content/plugins/owl-carousel/js/script.js?ver=4.0.5'></script>
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="https://www.mothercitydesigns.com/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="https://www.mothercitydesigns.com/wp-includes/wlwmanifest.xml" />

有两个使用 HTTP 调用的脚本（它们周围有额外的空间），其中突出显示的其他资源使用 HTTPS 调用。我会检查并查看所有这些是如何生成的。当其他人引用相同的方法时，看起来 woocommerce 是直接注入或使用自定义方法。如果我是对的，那么该方法就是导致问题的原因（可能是通过误解新标题。）

【讨论】：

感谢 Garbee 的建议。我已经按照你的建议做了，看起来不像是插件在做。它可能是实际的 CSS 和 js 文件吗？在 Google pagespeed 洞察力上，我收到缩小 js 和 css 的警告 - 渲染阻塞 js 和 css。
Pagespeed 是值得关注的好东西，但这与安全问题无关。更新答案，详细说明要查看的内容以获得更好的格式。
你说得对。它是 woocommerce 插件。我没想到。然而，他们并没有从头部区域被调用。
出于兴趣，您如何通过查看 .js 链接确定 woocommerce 是问题所在？
当路径被这样命名时，查看路径会很有帮助。它看起来不像 woocommerce 直接是问题，而是其他问题（因为 woocommerce 插件应该是通过 HTTP 调用的，但其他插件是 HTTPS。）只是你多年来调试这么多东西的东西。无论项目是直接放入头部还是通过事件注入，从源代码中开始都会引导您沿着自己的代码树进行调试。

【解决方案2】：

阅读 WooCommerce 变更日志后，2.3.12 版显示：

2.3.12 - 06/07/2015

Fix - Fixed Google Chrome forcing to use SSL. This can cause some issues on websites behind load balancers or reverse proxies.

刚刚完成了数据库备份并更新了 woocommerce。

似乎已经解决了问题。

虽然，我在实现我的 woocommerce 子主题时遇到了问题，所以我对核心 woocommerce 安装所做的更改需要更新。所以，在我启动 chil 主题并正常运行之前，我已经退回到以前的版本。

【讨论】：