Django+Vue使用Nginx實現Https域名的安全訪問

前端 VUE

• 前端訪問自身域名: https://demo.com，後序使用 Nginx 代理至後端
  直接訪問後端https:api會無證書認證：NO_SSL_Authentication_INVALID

後端 Django

• 使用sslserver模組啟動專案，使其滎api轉為https
  安裝：python install django-sslserver
  匯入setting.py： INSTALLED_APPS 'sslserver',
  允許主機ip：ALLOWED_HOSTS = ['*']
  啟動django：python manager.py runsslserver

Nginx代理

    server {
        listen    443    ssl;  # 監聽ssl 埠 443
        server_name  mydemo.com;   # 監聽伺服器域名

        # 指定域名安全證書：
        ssl_certificate    cert.pem;   # 將證書放在conf目錄下
        ssl_certificate_key    cert.key;    # 將證書放在conf目錄下
        ssl_protocols    TLSv1    TLSv1.1   TLSv1.2;
        ssl_ciphers    HIGH:!aNULL:!MD5;
        ssl_session_timeout    5m;

        # 代理本地vue專案
        location / {
            root   html;   # 專案所在檔案
            index    index.html  index.htm;  # 首頁檔案 
        }
        
        # 反向代理後端地址 ：以此需要後端服務以api開頭
        location /api {
            proxy_set_header    X-Real-IP   $remote_addr;
            proxy_pass       https://localhost:8080;  # 後端ip：埠
        }
    }

    # 80埠重定向443
    server {
        listen    80;
        server_name    mydemo.com;    
        rewrite  ^/(.*)$  https://$host$1 permanent;   
    }

 

基礎資訊

• windows 環境下， nginx-1.20版本;
• Nginx引數文件：https://blog.csdn.net/weixin_48404074/article/details/121317859
• Nginx官網：http://nginx.org/

常見異常：

• 瀏覽器 F12，API請求報錯：Mixed-content；
  原因：後端為http地址，前端請求https；兩者互不通。
  處理：後端使用sslserver啟動後端 https模式

• 報錯2：net::ERR_SSL_PROTOCOL_ERROR
  原因：前端https 訪問後端https介面沒有證書認證。
  處理：使用nginx代理至後端。