Cloudflare开启SSL后主页面重定向循环及购物车页CSS加载异常求助

一、主页重定向循环的排查与解决 #

• 核对Cloudflare SSL模式：先看Cloudflare控制面板的「SSL/TLS」设置，优先选「严格」模式（前提是你的源服务器已经装了有效SSL证书，比如Let’s Encrypt的）。如果源服务器没装SSL，先给源站部署证书，再切严格模式——要是用「灵活」模式，Cloudflare和源站之间用HTTP通信，源站如果有强制HTTPS的规则就会触发循环。
• 检查源站重定向规则：登录服务器看Apache的.htaccess或者Nginx配置文件，找强制HTTP转HTTPS的规则。比如Apache里如果有类似下面的规则，要确保它能识别Cloudflare的X-Forwarded-Proto头：

  RewriteCond %{HTTP:X-Forwarded-Proto} !https
  RewriteRule ^(.*)$ https://%{HTTP_HOST}/$1 [L,R=301]
  

  要是源站规则没考虑Cloudflare的代理头，就会出现“Cloudflare转HTTPS给用户，源站又把Cloudflare的HTTP请求转HTTPS”的死循环。要么修改规则适配代理头，要么直接换严格模式让源站和Cloudflare全用HTTPS。
• 确认站点核心URL设置：如果是WordPress站点，进后台「设置-常规」，把「WordPress地址」和「站点地址」都改成HTTPS开头的，改完后清掉Cloudflare和浏览器的缓存。
• 清空Cloudflare缓存：去Cloudflare的「缓存-配置」页面，点「清除全部缓存」，避免旧的重定向缓存导致问题。

二、购物车页面CSS加载失败的解决 #

• 检查CSS资源的引用协议：打开购物车页面源码，看CSS链接是HTTP还是HTTPS。如果是硬编码的HTTP，浏览器会因为混合内容拦截资源。解决办法：
  • 要是用WordPress，装个「Really Simple SSL」插件，自动把所有HTTP资源转成HTTPS；或者手动改主题/插件里的资源引用，用相对路径或者//开头的协议相对路径。
  • 如果是WooCommerce站点，去「WooCommerce-设置-高级」里确认购物车页面的URL是HTTPS，同时检查相关插件有没有硬写HTTP的资源链接。
• 开启Cloudflare自动HTTPS重写：在Cloudflare的「SSL/TLS-边缘证书」里，打开「自动HTTPS重写」功能，它会自动把页面里的HTTP资源链接替换成HTTPS，解决混合内容问题。
• 核对服务器MIME类型配置：确保服务器把CSS文件识别为text/css类型，不然浏览器可能不认。Apache可以在.htaccess加：

  AddType text/css .css
  

  Nginx在配置文件里加：

  types {
      text/css css;
  }
  

内容的提问来源于stack exchange，提问作者Klinika Ostrava