本地开发环境配置HTTPS

463 阅读2分钟

由于部分业务用到Javascript 带Cookie 跨域,而浏览器对cookie跨域安全越发严格,跨域请求必须是HTTPS。这就导致了本地开发环境跨域一直失效。类似会弹出这种错误。

此se-Cooile被阻止,因为它具有SameSite=None属性,但没有"Secure尾性该属性是使用SmeSteNone所必需的属性。

我翻看代码库,上述JS跨域请求,在2020年4月非HTTP请求还可以正常工作的。既然本地开发必须部署HTTPS,那么只能按照要求进行配置了。网上搜索了一下教程,我重新整理了一下,希望可以帮到各位。

我的开发环境

本地操作系统:Win10。

开发运行操作系统:虚拟机 Ubuntu18.04 + Nginx

开始配置HTTPS

现在要配置本地HTTPS非常简单,只需要用mkcert 执行几个简单命令即可。

  1. 按照你的实际情况,在github.com/FiloSottile… 下载对应的版本。由于我是Win10本地操作,因此需要下载Win版本。

  2. 在Win10下,执行CMD命令,切换到刚才下载mkcert存放的地址。依次执行如下命令

mkcert.exe -install #执行这个命令,会提示你安装一个CA证书。点确认即可。
 
mkcert.exe 你的域名 #后面填写你本地开发的映射域名

后面再有其他域名追加,只需要执行mkcert 域名 即可。

  1. 将上面生成的2个文件,上传到虚拟机Ubuntu 系统去。然后nginx配置对应的SSL证书。
ssl_certificate /root/www.test.com.pem; 
ssl_certificate_key /root/www.test.com-key.pem;

4.用浏览器访问本地的 www.test.com

是不是很简单?

Linux配置

如果你是Linux,一样按照上面的操作,下载对应的版本。然后将linux版本放在 /usr/local/bin 。然后执行

mkcert-v1.4.3-linux-amd64 -install
mkcert-v1.4.3-linux-amd64 域名

当然,你可以重命名 mkcert-v1.4.3-linux-amd64 为 mkcert。这样执行的命令就不用这么长了。

若上述运行出错,请根据mkcert的 README 说明,安装必要的运行环境。