通过域浏览时样式不起作用

Question

当我使用其ip地址浏览网站时，样式加载正常。但是，当我尝试使用域名进行操作时，样式无法正常工作。有趣的是，我已经检查了输出html，css源代码的代码，它们是100％相同的。那为什么浏览器没有在域模式下显示样式呢？

直接ip浏览-view-source:http://22.199.66.33/

域浏览-view-source:https://www.ogibogi.com/

在这里，我检查了两个源输出代码-https://www.diffchecker.com/diff

任何想法如何解决？

注意：我正在将cloudflare与domain一起使用。

注意：这是在更改托管服务器之后发生的。

Answer 1

在浏览器的控制台中检查输出。内容混合错误。

有关如何troubleshoot mixed content error的信息，请参阅Cloudflare KB。

一个简单的解决方法是启用“始终使用HTTPS”和“自动HTTPS重写”。

Answer 2

法伊兹的答案是正确的。转到“加密”选项卡，然后将“自动HTTPS重写”设置为“开”。但是，这不会影响样式表或javascript文件。而且，您有两个缺少的脚本和一个缺少的CSS文件。

要纠正这些问题，您需要使用相对参考。如果您要呼叫具有完整URL的资产（例如<img src="http://example.com/image.jpg" />），则希望将其更改为<img src="//example.com/image.jpg" />。通过删除http:，浏览器将使用访客已使用的任何协议。而且，在“加密”选项卡上，如果将“始终使用https设置为开，则该协议将为https。