Django+Vue+Nginx+Https域名代理访问

• 2022 年 6 月 1 日
• 筆記
• django

Django+Vue使用Nginx实现Https域名的安全访问

前端 VUE

• 前端访问自身域名: //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       //localhost:8080;  # 后端ip：端口
        }
    }

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

基础信息

• windows 环境下， nginx-1.20版本;
• Nginx参数文档：//blog.csdn.net/weixin_48404074/article/details/121317859
• Nginx官网：//nginx.org/

常见异常：

• 浏览器 F12，API请求报错：Mixed-content；
  原因：后端为http地址，前端请求https；两者互不通。
  处理：后端使用sslserver启动后端 https模式

• 报错2：net::ERR_SSL_PROTOCOL_ERROR
  原因：前端https 访问后端https接口没有证书认证。
  处理：使用nginx代理至后端。