本地开发启动https

本文最后更新于：2023-05-18 09:33:19

一、vue-cli, vite等脚手架支持https方式

二、 nginx代理

  1. 切到nginx目录

  2. 自己生成签名
    openssl req -x509 -nodes -days 36500 -newkey rsa:2048 -keyout ./ssl_certificate/nginx.key -out .ssl_certificate/nginx.crt

    如果没有ssl_certificate目录自己创建一个

  3. 配置niginx的conf文件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    server {
        listen      443 ssl;
        listen      80;
        # listen    somename:8080;
        server_name  你的开发地址-cloud.com;
        
        ssl_certificate     /usr/local/etc/nginx/ssl_certificate/nginx.crt;
        ssl_certificate_key     /usr/local/etc/nginx/ssl_certificate/nginx.key;
        ssl_session_timeout     5m;
        ssl_ciphers     ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
        ssl_protocols   TLSv1 TLSv1.1 TLSv1.2;
        ssl_prefer_server_ciphers   on;

        location / {
            proxy_pass http://127.0.0.1:7777;
        }
    }

  4. 重新加载nginx配置

    1
    2
    nginx -t
    nginx -s reload

  5. 配置host转发-可使用SwitchHosts工具

    127.0.0.0.1 你的开发地址-cloud.com

  6. 出现是私密连接，表示chrome认为签名是自己伪造

    临时解决方案，在该页面盲写输入 thisisunsafe

  7. 如果出现net::ERR_CONTENT_LENGTH_MISMATCH 200 (OK)， 表示无权限，使用sudo niginx 重新启动nginx

技术 前端
技术 开发 https

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！