解決CDN加速502 Error|SSL問(wèn)題|瀏覽器鏈接左側(cè)顯示“您與此網(wǎng)站之間建立的連接并非完全安全”

wordpress 2024-05-02編輯：深圳網(wǎng)站建設(shè)閱讀（） WordPress 與此 瀏覽器

環(huán)境

CDN加速，SSL證書(shū)認(rèn)證，WordPress，寶塔面板

在本文中將會(huì)解決的問(wèn)題

• 無(wú)限重新定向
• SSL證書(shū)配置正確但沒(méi)有生效
• SSL證書(shū)生效但顯示“您與此網(wǎng)站之間建立的連接并非完全安全”
• CDN加速后導(dǎo)致502 ERROR
• 由“您與此網(wǎng)站之間建立的連接并非完全安全”導(dǎo)致的WordPress主頁(yè)樣式丟失
• WordPress后臺(tái)無(wú)法進(jìn)入，自動(dòng)跳轉(zhuǎn)到https

無(wú)限重新定向

無(wú)限重新定向發(fā)生的時(shí)候看起來(lái)例如下圖：

當(dāng)出現(xiàn)這種情況時(shí)，檢查服務(wù)器中是否和CDN同時(shí)開(kāi)啟了強(qiáng)制https或者301重定向問(wèn)題。

SSL證書(shū)配置正確但沒(méi)有生效

當(dāng)我的博客發(fā)生了這個(gè)問(wèn)題的時(shí)候，我糾結(jié)了非常久，但只是因?yàn)橐粋€(gè)小失誤。

這個(gè)博客是使用我自己的實(shí)體服務(wù)器搭建的，在搭建時(shí)使用了兩個(gè)路由器，一個(gè)是主路由器，然后從主路由器中扯出一根線連接到Google Wifi然后再由Google Wifi中的Ethernet口再扯一根線到這臺(tái)Linux服務(wù)器上，因此存在著三個(gè)端口開(kāi)放規(guī)則！一個(gè)是主路由器，一個(gè)是Google Wifi，一個(gè)是當(dāng)前的Linux服務(wù)器

當(dāng)初我犯這個(gè)錯(cuò)誤的時(shí)候什么看起來(lái)都沒(méi)有問(wèn)題，自己的SSL證書(shū)驗(yàn)證了很多次都沒(méi)有問(wèn)題，直到最后我才發(fā)現(xiàn)主路由器沒(méi)有開(kāi)放用于SSL驗(yàn)證的443端口。所以當(dāng)出現(xiàn)配置完全正確，但SSL不生效時(shí)請(qǐng)一定先檢查你所有的端口開(kāi)放規(guī)則！保證443端口暢通無(wú)阻?。?！

SSL證書(shū)生效但顯示“您與此網(wǎng)站之間建立的連接并非完全安全” 和 由“您與此網(wǎng)站之間建立的連接并非完全安全”導(dǎo)致的WordPress主頁(yè)樣式丟失

這又是一個(gè)很常見(jiàn)的問(wèn)題，并不是SSL證書(shū)安裝完就可以完事的，關(guān)于這兩個(gè)問(wèn)題，是可以一起說(shuō)的，倒不如說(shuō)他們是因果關(guān)系。

https可以訪問(wèn)，WordPress頁(yè)面也出來(lái)了,但是瀏覽器鏈接左側(cè)顯示“您與此網(wǎng)站之間建立的連接并非完全安全”，并且WordPress的樣式丟失了。

那么我這里利用Chrome瀏覽器舉個(gè)栗子，在你的頁(yè)面中點(diǎn)擊鼠標(biāo)右鍵，在菜單中選擇?檢查，或者使用組合鍵Ctrl+Shift+I

在右側(cè)中找到Console(控制臺(tái))，點(diǎn)擊進(jìn)去之后你應(yīng)該可以看到如下圖所示的樣子：

圖示1

并且你的網(wǎng)頁(yè)鏈接左側(cè)顯示(看到證書(shū)也是有效的):

圖示2

在圖示1中可以看出請(qǐng)求的CSS還是http開(kāi)頭，就是因?yàn)檎{(diào)用了http,因此才會(huì)不完全安全，哪怕你擁有SSL證書(shū)，而事實(shí)也是如此。

在圖示1中也可以看出請(qǐng)求的正式CSS格式的樣式文件，但是被瀏覽器阻攔(Block)了，這時(shí)需要對(duì)WordPress進(jìn)行以下操作。

以CentOS為例，首先使用Linux指令cd指定到WordPress的安裝目錄(如果你是寶塔那就簡(jiǎn)單多了

假如我的根目錄在/xxx/wwwroot/pzo.cc,則使用指令

cd /xxx/wwwroot/pzo.cc

基礎(chǔ)指令我就不多說(shuō)了。在你的根目錄下輸入

vi wp-config.php

會(huì)打開(kāi)一個(gè)文檔，如下圖示:

點(diǎn)擊i進(jìn)入insert模式，在圖示中的

* @package WordPress
*/

下方加上:

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

之后按ESC鍵，輸入?:wq?保存并退出。

隨后我們繼續(xù)使用指令cd wp-includes/從當(dāng)前的根目錄繼續(xù)打開(kāi)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?保存并退出。

自此問(wèn)題應(yīng)當(dāng)被修復(fù):D

WordPress后臺(tái)無(wú)法進(jìn)入，自動(dòng)跳轉(zhuǎn)到https

如果出現(xiàn)這個(gè)問(wèn)題則是你太急著弄SSL證書(shū)了，在Https生效之前就在站點(diǎn)設(shè)置中將自己的URL換到了https。

鑒于無(wú)法從后臺(tái)登錄修改，我比較建議使用數(shù)據(jù)庫(kù)管理軟件直接修改，這里示范使用PhpMyAdmin

打開(kāi)搭建WordPress時(shí)使用的數(shù)據(jù)庫(kù)，看起來(lái)應(yīng)該是這樣的：

我們打開(kāi)wp_options這個(gè)表，在里面找到option_name列中的siteurl和home,在后面將你手賤加上去的https先暫且改到http,待https配置完成后再改到https!

至此問(wèn)題解決。

CDN加速后導(dǎo)致502 ERROR

在CDN的源站設(shè)置中的回源協(xié)議從HTTPS改為HTTP,源站地址使用數(shù)字外網(wǎng)IP。

在管理域名的DNS中設(shè)置解析CNAME至你的數(shù)字外網(wǎng)IP至CDN。

至此問(wèn)題解決。

• 上一章：Discuz! 環(huán)境部署與安裝
• 下一章：nps內(nèi)網(wǎng)穿透實(shí)現(xiàn)外網(wǎng)訪問(wèn)樹(shù)莓派