在 Windows 10 的本地环境配置 HTTPS(https://localhost)，基于 mkcert

1、现在本地环境网址：http://morefun.dev.xxx.cn/ 希望获取到开发环境网址：https://.xxx.cn 下的 Cookie 数据，发现无法获取。原因在于 http 与 https 的差异。

2、在本地环境配置网址：https://morefun.dev.xxx.cn/ 。

3、参考网址：https://web.dev/how-to-use-local-https/ 。如何使用HTTPS进行本地开发。有时，您需要使用 HTTPS 运行本地开发站点。安全快速地执行此操作的工具和提示。如图1

图1

4、在特殊情况下才需要在本地使用 HTTPS，例如自定义主机名或跨浏览器的安全 cookie。现在的情况就是跨浏览器的安全 cookie。如果您的生产网站使用 HTTPS，您希望本地开发网站的行为类似于 HTTPS 网站。

5、使用 mkcert 使用 HTTPS 在本地运行您的站点(推荐)。如果您使用 HTTPS 在浏览器中打开本地运行的站点，您的浏览器将检查本地开发服务器的证书。在看到证书已由 mkcert 生成的证书颁发机构签名后，浏览器会检查它是否已注册为受信任的证书颁发机构。mkcert 被列为受信任的颁发机构，因此您的浏览器信任该证书并创建 HTTPS 连接。

6、mkcert 是一个简单的工具，用于制作本地信任的开发证书。 它不需要配置。参考网址：https://github.com/FiloSottile/mkcert 。在 Windows 上，使用预构建的二进制文件。下载：mkcert-v1.4.3-windows-amd64.exe 至目录：E:/wwwroot。如图2

图2

7、以管理员身份运行 PowerShell，进入目录：E:/wwwroot，将 mkcert 添加到本地根 CA。在您的终端中，运行以下命令：，点击 是，本地 CA 现已安装在系统信任库中！ ⚡注意：Firefox 支持在您的平台上不可用。如图3

图3

PS E:/wwwroot> ./mkcert-v1.4.3-windows-amd64.exe install
Note: the local CA is not installed in the system trust store.
Run "mkcert -install" for certificates to be trusted automatically ⚠️

Created a new certificate valid for the following names 📜
 - "install"

The certificate is at "./install.pem" and the key at "./install-key.pem" ✅

It will expire on 2 December 2023 �
PS E:/wwwroot> ./mkcert-v1.4.3-windows-amd64.exe -install
The local CA is now installed in the system trust store! ⚡️
Note: Firefox support is not available on your platform. ℹ️

PS E:/wwwroot>�

8、为您的站点生成一个由 mkcert 签名的证书。导航到站点(https://localhost)的根目录。如图4

图4

PS E:/wwwroot> ./mkcert-v1.4.3-windows-amd64.exe localhost

Created a new certificate valid for the following names 📜
 - "localhost"

The certificate is at "./localhost.pem" and the key at "./localhost-key.pem" ✅

It will expire on 2 December 2023 🗓

PS E:/wwwroot>

9、在本地环境的 Nginx 配置文件中添加对于证书的支持。剪切文件至：C:/nginx-1.10.1/conf/localhost.pem、C:/nginx-1.10.1/conf/localhost-key.pem。编辑 C:/nginx-1.10.1/conf/nginx.conf。添加以 ssl 开头的 3 行。监听端口修改为 443。如图5

图5

    server {
        listen 443;
        server_name  localhost;

		client_max_body_size 200m;
		client_body_buffer_size 1024k;

		fastcgi_read_timeout 180s;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

		ssl on;
		ssl_certificate localhost.pem;
		ssl_certificate_key localhost-key.pem;

        location / {
            root   E:/wwwroot;
            index  index.html index.htm index.php;
        }

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ /.php$ {
        #    proxy_pass   http://127.0.0.1;
        #}

        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        location ~ /.php$ {
	    fastcgi_split_path_info ^(.+/.php)(/.+)$;
            root           E:/wwwroot;
            fastcgi_pass   127.0.0.1:9000;
            fastcgi_index  index.php;
            fastcgi_param  SCRIPT_FILENAME  $document_root$fastcgi_script_name;
            include        fastcgi_params;
        }

        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ //.ht {
        #    deny  all;
        #}
    }

10、在 Chrome 浏览器中打开网址：https://localhost/phpinfo.php ，访问成功，符合预期。如图6

图6

11、以管理员身份运行 PowerShell，进入目录：E:/wwwroot，为您的站点(https://morefun.dev.xxx.cn)生成一个由 mkcert 签名的证书。

PS E:/wwwroot> ./mkcert-v1.4.3-windows-amd64.exe morefun.dev.xxx.cn

Created a new certificate valid for the following names 📜
 - "morefun.dev.xxx.cn"

The certificate is at "./morefun.dev.xxx.cn.pem" and the key at "./morefun.dev.xxx.cn-key.pem" ✅

It will expire on 2 December 2023 🗓

12、参考以上的步骤，复制证书文件，编辑 Nginx 文件。打开网址：https://morefun.dev.xxx.cn/ ，在 Cookies 中，已经能够获取到开发环境网址：https://.xxx.cn 下的 Cookie 数据 。如图7

图7