由于部分业务用到Javascript 带Cookie 跨域,而浏览器对cookie跨域安全越发严格,跨域请求必须是HTTPS。这就导致了本地开发环境跨域一直失效。类似会弹出这种错误。
此se-Cooile被阻止,因为它具有SameSite=None属性,但没有"Secure尾性该属性是使用SmeSteNone所必需的属性。
我翻看代码库,上述JS跨域请求,在2020年4月非HTTP请求还可以正常工作的。既然本地开发必须部署HTTPS,那么只能按照要求进行配置了。网上搜索了一下教程,我重新整理了一下,希望可以帮到各位。
我的开发环境
本地操作系统:Win10。
开发运行操作系统:虚拟机 Ubuntu18.04 + Nginx
开始配置HTTPS
现在要配置本地HTTPS非常简单,只需要用mkcert 执行几个简单命令即可。
-
按照你的实际情况,在github.com/FiloSottile… 下载对应的版本。由于我是Win10本地操作,因此需要下载Win版本。
-
在Win10下,执行CMD命令,切换到刚才下载mkcert存放的地址。依次执行如下命令
mkcert.exe -install #执行这个命令,会提示你安装一个CA证书。点确认即可。
mkcert.exe 你的域名 #后面填写你本地开发的映射域名
后面再有其他域名追加,只需要执行mkcert 域名 即可。
- 将上面生成的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 说明,安装必要的运行环境。