在本地环境（mac）启用https

前段时间客户一个涉及地理定位功能的页面突然出问题不能正常使用，在修复的过程中发现定位的方法 getCurrentPosition 只能在 https 协议下才能成功调用，这导致我在本地不能调试，每次修改完必须上传到生产环境，可以想象这整个过程是多么痛苦。于是这几天特地学了下如何在本地启用 https ，并将它记录下来以备不时之需：

1、安装 openssl

npm install openssl

 

2、建立服务器私钥 —— 私钥最好建立在服务区的根目录下(我本地用的是 nginx)

openssl genrsa -des3 -out server.key 1024

在这个过程中需要输入密码短语，需要记住这个密码，后面会用到

 

3、生成安全证书

openssl req -new -key server.key -out server.csr

这一步需要手动输入如下内容:

• Country Name(国家：中国填写CN)
• State or Province Name(区域或是省份，如：Shanghai)
• Locality Name(地区局部名字，如：Shanghai)
• Organization Name(机构名称：填写公司名)
• Organizational Unit Name(组织单位名称:部门名称)
• Common Name(网站域名)
• Email Address(邮箱地址)
• A challenge password(输入一个密码)
• An optional company name(一个可选的公司名称)

此时会在当前目录生成 server.csr 文件，然后依次执行如下命令：

 

cp server.key server.key.org

openssl rsa -in server.key.org -out server.key

openssl x509 -req -days 365 -in server.csr -signkey server.key -out server.crt

4、配置 Nginx —— 在 Nginx 中找到你想要配置的域名的 .conf 文件写入如下配置内容

• listen 443 ssl; (端口号并开启ssl)
• server_name xxx.xxx.com; (域名)
• ssl_certificate /... /server.crt; (证书在本机的路径)
• ssl_certificate_key / ... /server.key; (key在本机的路径)

　　……

5、安装证书 —— 双击 server.crt 即可安装证书，安装完后会打开钥匙串，里面包含很多证书和应用程序秘密，刚刚安装好的证书也在里面，双击打开该证书 -> 点击信任左边的三角按钮 -> 设置“使用此证书时”的选项为“始终信任”

 

重启 Nginx ，用 Safari 打开本地 https 网站已经没有问题了，但用 Chrome 打开本地 https 网站仍然提示安全问题，没关系我们可以无视强行访问，毕竟我们开启 https 只是为了方便开发而已。

 

6、配置Charles —— 到第五步其实已经可以在 pc 端启用 https 了，但若想在手机端访问本地 https 还需通过 Charles 来代理：

　　1）选择 帮助 -> SSL代理 -> 安装 Charles Root 证书 -> 设置 Charles Root 证书为始终信任

　　2）打开 Charles 代理设置，勾选 “启用透明HTTP代理”，注意，这里不要勾选使用动态端口，后面配置手机端时候需要这里有个固定的端口，我这里设置的端口是8989。

　　3）打开 Charles 的 SSL 代理设置，并添加主机和端口，https 端口一般为443，主机建议用 * ，这样可以避免以后频繁改动。

7、配置手机 —— 想要手机访问到电脑本地的主机有个前提，手机和电脑须处于一个局域网里，所以手机不能用4G，需要改成 wifi。

　　1）下载 Charles 根证书： 在浏览器中打开 chls.pro/ssl，按照提示点允许；

　　2）打开 设置 -> 通用 -> 描述文件与设备管理 安装刚刚下载的文件；

　　3）打开：设置 -> 通用 -> 关于本机 -> 证书信任设置，找到刚刚安装的 Charles 证书将其设为信任；

　　4）选择 设置 -> 无线局域网 -> 当前wifi -> 配置代理 -> 手动，输入服务器 ip 地址和端口，服务器 ip 即电脑在局域网中的 ip 地址，端口就是刚刚在 Charles 配置的代理端口，我这里是8989，填完别忘记存储。

 

　　至此就开启了完整的本地 https，可以同时在电脑和手机上进行调试。