解决CDN加速502 Error|SSL问题|浏览器链接左侧显示“您与此网站之间建立的连接并非完全安全”

前言

这是这个博客刚刚经历过的问题,解决后分享给大家,说不定有需要呢? :huaji2: :good:

环境

CDN加速,SSL证书认证,WordPress,宝塔面板

在本文中将会解决的问题

  • 无限重新定向
  • SSL证书配置正确但没有生效
  • SSL证书生效但显示“您与此网站之间建立的连接并非完全安全”
  • CDN加速后导致502 ERROR
  • 由“您与此网站之间建立的连接并非完全安全”导致的WordPress主页样式丢失
  • WordPress后台无法进入,自动跳转到https

无限重新定向

无限重新定向发生的时候看起来例如下图:

当出现这种情况时,检查服务器中是否和CDN同时开启了强制https或者301重定向问题。

SSL证书配置正确但没有生效

当我的博客发生了这个问题的时候,我纠结了非常久,但只是因为一个小失误。

这个博客是使用我自己的实体服务器搭建的,在搭建时使用了两个路由器,一个是主路由器,然后从主路由器中扯出一根线连接到Google Wifi然后再由Google Wifi中的Ethernet口再扯一根线到这台Linux服务器上,因此存在着三个端口开放规则!一个是主路由器,一个是Google Wifi,一个是当前的Linux服务器

当初我犯这个错误的时候什么看起来都没有问题,自己的SSL证书验证了很多次都没有问题,直到最后我才发现主路由器没有开放用于SSL验证的443端口。所以当出现配置完全正确,但SSL不生效时请一定先检查你所有的端口开放规则!保证443端口畅通无阻!!!

SSL证书生效但显示“您与此网站之间建立的连接并非完全安全” 和 由“您与此网站之间建立的连接并非完全安全”导致的WordPress主页样式丢失

这又是一个很常见的问题,并不是SSL证书安装完就可以完事的,关于这两个问题,是可以一起说的,倒不如说他们是因果关系。

https可以访问,WordPress页面也出来了,但是浏览器链接左侧显示“您与此网站之间建立的连接并非完全安全”,并且WordPress的样式丢失了。

那么我这里利用Chrome浏览器举个栗子,在你的页面中点击鼠标右键,在菜单中选择 检查,或者使用组合键Ctrl+Shift+I

在右侧中找到Console(控制台),点击进去之后你应该可以看到如下图所示的样子:

图示1

并且你的网页链接左侧显示(看到证书也是有效的):

图示2

在图示1中可以看出请求的CSS还是http开头,就是因为调用了http,因此才会不完全安全,哪怕你拥有SSL证书,而事实也是如此。

在图示1中也可以看出请求的正式CSS格式的样式文件,但是被浏览器阻拦(Block)了,这时需要对WordPress进行以下操作。

以CentOS为例,首先使用Linux指令cd指定到WordPress的安装目录(如果你是宝塔那就简单多了 :huaji: )

假如我的根目录在/xxx/wwwroot/japerz.com,则使用指令

cd /xxx/wwwroot/japerz.com

基础指令我就不多说了。在你的根目录下输入

vi wp-config.php

会打开一个文档,如下图示:

点击i进入insert模式,在图示中的

* @package WordPress
*/

下方加上:

$_SERVER['HTTPS'] = 'on';
define('FORCE_SSL_LOGIN', true);
define('FORCE_SSL_ADMIN', true);

之后按ESC键,输入 :wq 保存并退出。

随后我们继续使用指令cd wp-includes/从当前的根目录继续打开wp-includes目录,使用指令vi functions.php编辑 functions.php文件

找到

require( ABSPATH . WPINC . '/option.php' );

然后在它的下方添加

add_filter('script_loader_src', 'agnostic_script_loader_src', 20,2); 

function agnostic_script_loader_src($src, $handle) { 
return preg_replace('/^(http|https):/', '', $src); 
} 

add_filter('style_loader_src', 'agnostic_style_loader_src', 20,2); 

function agnostic_style_loader_src($src, $handle) { 
return preg_replace('/^(http|https):/', '', $src);

}

随后按ESC键,输入 :wq 保存并退出。

自此问题应当被修复:D

WordPress后台无法进入,自动跳转到https

如果出现这个问题则是你太急着弄SSL证书了,在Https生效之前就在站点设置中将自己的URL换到了https。

鉴于无法从后台登录修改,我比较建议使用数据库管理软件直接修改,这里示范使用PhpMyAdmin

打开搭建WordPress时使用的数据库,看起来应该是这样的:

我们打开wp_options这个表,在里面找到option_name列中的siteurlhome,在后面将你手贱加上去的https先暂且改到http,待https配置完成后再改到https!

至此问题解决。

 

CDN加速后导致502 ERROR

在CDN的源站设置中的回源协议从HTTPS改为HTTP,源站地址使用数字外网IP。

在管理域名的DNS中设置解析CNAME至你的数字外网IP至CDN。

至此问题解决。

注意,最好不要使用二级域名,我这边试了一下出了很多问题= =包括证书以及无法准确解析的问题!总而言之就是很乱!

后记

看起来杰帕斯の小窝还真是多灾多难啊 :huaji9:

不过这些终将成为我学习路中的经验 :huaji23:

点赞
  1. 洛水居室说道:
    Google Chrome Windows 10

    哦,开CDN了?对了,套CDN让他走的端口可以是443或者80。但是你服务器SSL没配置好又了强制重定向——CDN访问80又被重定向443,但是443无法访问又定向80(无限套娃)
    还有我估计你第三个问题的原因是你开了HTTPS没有进设置->常规->WordPress地址(URL)和 站点地址(URL)里面的地址没有修改成HTTPS,使得资源会访问HTTP的链接。

    1. jackma12138 jackma12138说道:
      Firefox Windows 10

      呼姆呼姆原来如此!有用的知识增加了!!

发表评论

电子邮件地址不会被公开。必填项已用 * 标注