快捷導(dǎo)航

解決Nginx轉(zhuǎn)發(fā)圖片不能顯示的問(wèn)題

更新時(shí)間：2024年11月08日 09:00:56 作者：paul_hch

在使用Nginx作為反向代理將iServer的HTTP協(xié)議轉(zhuǎn)換為HTTPS協(xié)議時(shí),可能會(huì)遇到靜態(tài)資源無(wú)法加載、頁(yè)面跳轉(zhuǎn)回HTTP協(xié)議、訪問(wèn)服務(wù)管理界面權(quán)限問(wèn)題等情況,本文給大家介紹解決Nginx轉(zhuǎn)發(fā)圖片不能顯示的問(wèn)題,感興趣的朋友一起看看吧

背景：最近很多小伙伴使用Nginx代理iServer，將HTTP協(xié)議成HTTPS協(xié)議，但是可能會(huì)出現(xiàn)以下幾種情況：（1）圖片、js、css等靜態(tài)資源無(wú)法加載

（2）代理后頁(yè)面跳轉(zhuǎn)回HTTP協(xié)議

（3）代理后訪問(wèn)服務(wù)管理界面提示“該用戶無(wú)查詢服務(wù)訪問(wèn)統(tǒng)計(jì)信息權(quán)限”

針對(duì)上述情況應(yīng)該如何解決問(wèn)題呢？其實(shí)這些問(wèn)題都是因?yàn)榇砗髞G失https協(xié)議，導(dǎo)致請(qǐng)求變成http，下面我將詳細(xì)講解如何避免這個(gè)問(wèn)題。本文采用的OpenSSL去生成公鑰和私鑰。生成密鑰的方式可以參考博客（Nginx代理iServer的HTTP協(xié)議成HTTPS）介紹得比較詳細(xì)，在此就不做多余的說(shuō)明了。首先我們需要引入一個(gè)Nginx知識(shí)：sub_filter模塊為Nginx官方自帶的模塊，功能為替換掉返回給客戶端數(shù)據(jù)的指定內(nèi)容。需要使用該功能時(shí)只需要在編譯時(shí)添加對(duì)該模塊的支持，便會(huì)編譯到Nginx的內(nèi)核。本需介紹的方式就是利用sub_filter將HTTP替換成HTTPS。sub_filter語(yǔ)法包括：sub_filter_types：*; 需要替換的類(lèi)型，如text/htnl text/plain application/ javascript等，以空格分隔，默認(rèn)只查找文本型文件；sub_filter_once: on/off; 是否只替換一次，on是開(kāi)啟此功能，off是關(guān)閉——默認(rèn)值是on；sub_filter: xxx1 xxx2; 前面的參數(shù)為原始內(nèi)容，后面的參數(shù)為替換后的內(nèi)容。Nginx配置說(shuō)明：

# https配置
    server {
        listen       8000 ssl;
        server_name  ip;
        ssl_certificate      nginxRSAcert.pem;
        ssl_certificate_key  nginxRSAcert.key;
        ssl_session_cache    shared:SSL:1m;
        ssl_session_timeout  5m;
        ssl_ciphers  HIGH:!aNULL:!MD5;
        ssl_prefer_server_ciphers  on;
        location / {
            proxy_pass   http://ip:8090;
            proxy_set_body $request_body;
            proxy_set_header Accept-Encoding "";
            proxy_set_header Host $host:8000;
            sub_filter_once off;
            sub_filter_types *;
            sub_filter 'http://ip:8000/iserver' 'https://ip:8000/iserver';
        }
  }

結(jié)果驗(yàn)證：（1）圖片、js、css靜態(tài)資源正常加載