在 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

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

图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

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

图2

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

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

图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

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

图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

在本地环境的 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

    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

在 Chrome 浏览器中打开网址:https://localhost/phpinfo.php ,访问成功,符合预期。

图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

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

图7

原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/250854.html

(0)
上一篇 2022年5月1日
下一篇 2022年5月1日

相关推荐

发表回复

登录后才能评论