宝塔面板使用CF代理遇到的问题以及解决办法。

最容易出现的一个问题就是 CSS文件丢失的问题

https://static.cloudflareinsights.com/beacon.min.js/layer.css?v=3.0.11110

为什么会出现这个问题？

这是因为你在 Cloudflare (CF) 的后台开启了 Rocket Loader（火箭加载器） 功能。 Rocket Loader 会接管并异步执行页面上的所有 JavaScript，以此来加速网页显示。但是，你网站里用的弹窗插件（layer.js）有一个特殊机制： 它在运行时会自动去寻找自己的脚本路径，然后动态加载对应的 layer.css 样式文件 。

当 Rocket Loader 介入后，它打乱了脚本的执行顺序和路径上下文。导致 layer.js 彻底“迷路”了，你看第二张截图的最下面，它居然把 css 文件的请求路径拼到了 CF 的统计脚本后面（变成了 https://static.cloudflareinsights.com/beacon.min.js/layer.css），这当然会加载失败（报红错）！

完美解决方案：在 Cloudflare 中设置页面规则

1. 登录你的 Cloudflare 控制台 ，进入你绑定的那个域名（xxx.com）。
2. 在左侧菜单找到 【规则 (Rules)】 -> 【页面规则 (Page Rules)】 （或者叫【配置规则 Configuration Rules】）。
3. 点击 【创建页面规则 (Create Page Rule)】 。
4. URL 匹配填写你宝塔面板的访问地址，比如： xx.com/* （如果你是用这个子域名访问宝塔）。

5. 在下方的设置项中：

   • 选择 【Rocket Loader™】
   • 状态选为 【关闭 (Off)】
   • (建议顺手再添加一个设置：【缓存级别 (Cache Level)】 设为 【绕过 (Bypass)】 ，因为宝塔面板作为动态后台，绝对不能被 CF 缓存，否则会出各种奇怪的 Bug)
6. 点击 保存并部署 。

最后，去 Cloudflare 找到 【缓存】->【清除所有缓存】 。 刷新一下你的宝塔网页，弹窗插件的样式立马就能正常加载了，同时也不会影响你前台网站的加速效果！

另外一个问题就是 开启了代理后，无法识别到登录的IP 或者操作IP

修改代理域名的配置即可

    location ^~ / {
  
      proxy_pass http://127.0.0.1:8888; #修改为你的端口
      proxy_set_header Host $http_host;

      proxy_set_header X-Real-IP $http_cf_connecting_ip;
      proxy_set_header X-Real-Port $remote_port;
      proxy_set_header X-Forwarded-For $http_cf_connecting_ip;
      proxy_set_header X-Forwarded-Proto $scheme;
      proxy_set_header X-Forwarded-Host $host;
      proxy_set_header X-Forwarded-Port $server_port;
      proxy_set_header REMOTE-HOST $http_cf_connecting_ip;
  
      proxy_connect_timeout 60s;
      proxy_send_timeout 600s;
      proxy_read_timeout 600s;
      proxy_http_version 1.1;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection $connection_upgrade;
  
    }