Change http://localhost into https://localhost（本地开发环境http转https）

最新推荐文章于 2024-01-12 19:50:14 发布
最新推荐文章于 2024-01-12 19:50:14 发布
阅读量1.4k 收藏 2
点赞数
分类专栏： 前端学习 文章标签： https
原文链接：https://www.freecodecamp.org/news/how-to-get-https-working-on-your-local-development-environment-in-5-minutes-7af615770eec/
版权

In fact, I’ve never thought this question before yestoday. But, I truly met this problem in yestoday’s interview. Don’t be afraid, I’ll just translate a article in FreeCodeCamp. So, are you scared by me?hhhhhhh

有木有被吓到？有木有？哈哈哈哈哈哈哈~接下来，开始我的同声传译😁

原文传送门

5分钟实现https本地开发环境部署

今天你看到的所有网站几乎都被https保护着，如果还没有，那它应该那样做。用https来为你的服务器保驾护航，也意味着你不能向未使用https的服务器发送请求。这对使用本地开发环境的开发人员来说是一个问题，因为他们都用http://localhost来运行代码。

一开始，我负责使用HTTPS保护我们的AWS弹性负载均衡终端节点，以作为增强安全性的举措的一部分。我遇到了这样一种情况，即服务器拒绝本地开发环境对的请求。

google之后，我发现了一些带有详细说明在本地部署hppts的文章。尽管我一一照做也依旧报错NET::ERR_CERT_COMMON_NAME_INVALID。

问题所在

那些我找到的解决方法，在记录的时候都是正确的，但是，时代变了！老爷~

在我一顿操作之后，我终于发现了原因——Chrome已弃用证书中对commonName匹配的支持，自2017年1月起，subjectAltName取而代之。

解决方案

使用OpenSSL来生成证书。

step1：Root SSL认证

第一步是生成一个Root Secure Sockets Layer (SSL)证书。这个根证书可以对域单个内生成的任意数量的证书进行签名。 如果你不熟悉SSL生态系统，那么DNSimple的这篇文章可以很好地介绍根SSL证书。

生成一个RSA-2048的密钥并保存在rootCA.key文件中。这个文件是用来生成根SSL证书的关键。每次使用该特定密钥生成证书时，系统都会提示您输入密码。

openssl genrsa -des3 -out rootCA.key 2048

您可以使用生成的密钥来创建新的根SSL证书。 将其保存到名为rootCA.pem的文件中。 该证书的有效期为1024天。 你可以随心所欲的改成你想要的任何天数。 系统还会提示您提供其他可选信息。

openssl req -x509 -new -nodes -key rootCA.key -sha256 -days 1024 -out rootCA.pem

在这里插入图片描述

step2：信任root SSL证书

在使用新创建的Root SSL证书启动发布域证书之前，还有一个步骤。你需要告诉Mac信任您的根证书，这样它颁发的所有单个证书也将受到信任。

在Mac上打开“Keychain Access”，然后转到“系统”钥匙串中的“证书”类别。 到达那里后，使用文件>导入项目，导入rootCA.pem。 双击导入的证书，然后在“信任”部分中将“使用此证书时：”下拉列表更改为“始终信任”。

如果你按照说明做了，那么你的证书在“钥匙串访问”中应该看起来像这样。
在这里插入图片描述

step 3：域SSL证书

现在，根SSL证书可以用来专门为你的本地开发环境颁发一个证书了。

创建一个新的OpenSSL配置文件server.csr.cnf引入如下配置，以便在创建证书时可以导入这些设置，而不必在命令行中输入它们。

[req]
default_bits = 2048
prompt = no
default_md = sha256
distinguished_name = dn

[dn]
C=US
ST=RandomState
L=RandomCity
O=RandomOrganization
OU=RandomOrganizationUnit
emailAddress=hello@example.com
CN = localhost

创建一个v3.ext文件来生成一个X509 v3 certificate。注意我们如何在此处指定subjectAltName。

authorityKeyIdentifier=keyid,issuer
basicConstraints=CA:FALSE
keyUsage = digitalSignature, nonRepudiation, keyEncipherment, dataEncipherment
subjectAltName = @alt_names

[alt_names]
DNS.1 = localhost

使用存储在server.csr.cnf中的配置为localhost创建证书密钥。 该密钥存储在server.key中。

openssl req -new -sha256 -nodes -out server.csr -newkey rsa:2048 -keyout server.key -config <( cat server.csr.cnf )

通过我们先前创建的根SSL证书发出证书签名请求，为localhost创建域证书。 输出是一个名为server.crt的证书文件。

openssl x509 -req -in server.csr -CA rootCA.pem -CAkey rootCA.key -CAcreateserial -out server.crt -days 500 -sha256 -extfile v3.ext

在这里插入图片描述

大功告成

现在，你就可以在本地用https了，将server.key和server.crt文件移动到服务器上的可访问位置，并在启动服务器时将它们包括在内。

在用Node.js编写的Express应用中，操作方法如下。 确保仅针对您的本地环境执行此操作。 不要在生产中使用它。

在这里插入图片描述
希望本教程对你有所帮助。 如果你不满意自己执行此处提供的命令，我已经创建了一组方便的脚本，可以快速运行这些脚本来为您生成证书。 更多细节可以在GitHub仓库中找到。

OK~翻译完毕！

As you see, this article is writen for MAC, I’m not sure it can also use in Windows. I’ll try it when I have time！bye~

我要你好好的。
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
https-localhost：在localhost上运行的HTTPS服务器
01-29
在本地主机上运行的HTTPS服务器 我正在寻找维护者和贡献者！ 。 使用HTTP2和SSL在localhost上运行快速服务器。 服务静态文件或将其导入为项目中的模块。 由于本地信任的开发证书，https-localhost是用于在SSL上提供静态内容的轻量级工具。 它可与MacOS，Linux和Windows，Chrome和Firefox一起使用，并且无需任何配置。 依存关系 Firefox和Chrome需要nss / certutils。 苹果系统 brew install nss Linux sudo apt install libnss3-tools -or- sudo yum install nss-tools -or- sudo pacman -S nss 独立安装和使用 npm i -g --only=prod https-localhost serve ~ /myproj sudo可能是必要的。 如果未提供静态路径，则将提供当前目录内容。 您可以更改端口以设置PORT环境变量： PORT=4433 serve ~/myproj 。 指定端口号
https想访问本地部署的http://localhost接口
he3236220的博客
11-21 1173
网址是https的，想访问java本地启的一个程序接口http://localhost:8089。
Vue localhost 从 http 307 到 https
broken_promise的博客
07-15 493
TOC/TOC。
本地http://localhost请求改为https://localhost，http请求改为https请求
Slovef的博客
04-15 1827
若要将 HTTPS 与 localhost 一起使用，请提供 server.ssl.key 属性。 若要生成自签名证书，请使用 keytool 实用工具（包含在 JRE 中）。 下面是一个示例： keytool -genkeypair -alias testCert -keyalg RSA -storetype PKCS12 -keystore keystore.p12 -storepass password server.ssl.key-store-type=PKCS12 server.ssl.k
Https网站搭建——通过https://localhost:8443访问tomcat首页
weixin_30938149的博客
12-23 2759
图片大致介绍了Https浏览器与服务器握手的过程，涉及到的名词：证书、Hash算法、随机数密码、公钥加密、私钥解密、握手消息、hash验证、摘要 tomcat服务器配置可以实现https双向认证，简单起见，我们只实现单向认证，过程： 1.为服务器生成证书 %JAVA_HOME%/bin，利用keytool为Tomcat生成证书， keytool -genkey -v -alias to...
解决https://localhost:1158/em 页面无法打开的问题
weixin_33805992的博客
07-05 1753
https://localhost:1158/em 无法显示页面，在网上查阅资料以后发现这个页面时由服务：OracleDBConsoleoracl控制的，所以到管理界面打开服务：OracleDBConsoleoracl。但是启动OracleDBConsoleoracl服务的时候报错：Windows不能在本地计算机启动OracleDBConsoleorcl。有关更多信息，查阅系统事件日志。如果这是非...
Nginx https 二级域名 无法跳转 跳出https://localhost/ 页面 问题
C的博客
12-14 687
话不多说 直接上配置。
nginx配置localhost https视频服务
技术笔记
09-29 1613
第一种方法 step 1：增加alias到/etc/hosts 127.0.1.1 localhostssl step ２：创建ssl证书 $ sudo mkdir /usr/local/nginx/cert $ cd /usr/local/nginx/cert $ sudo openssl req -x509 -sha256 -nodes -newkey rsa:2048 -days 365 -keyout localhost.key -out localhost.crt 查看证书内容
localhost http请求改成https
weixin_46600931的博客
02-28 455
1、HTTPS=true SSL_CRT_FILE=localhost+1.pem SSL_KEY_FILE=localhost+1-key.pem将http改为https。2、PORT改变端口。
simple demo web project, it covers below techical topics:
03-23
2. change the datasource setting in /src/main/resource/application.yaml 3. load source into idea15. 4. application > boot run, also you can build the project with gradle command. 5. access ...
project-stats:从github项目中提取和可视化贡献者统计数据
05-07
项目统计 用于从github项目中提取和可视化贡献者统计信息的脚本 报告 ... $ git clone https://github.com/no9/project-stats $ cd project-stats/public ...# Make an output dir and change into it $
GoBarber后端：在UM烧烤场中进行训练的Projeito feito paraprestação，并在GoStack 11和Rocketseat进行训练
02-17
API GoBarber :file_folder: 项目 想法是为理发店提供一个应用程序网络和移动设备，我可以在这里安排在可用的理发时间剪头发... # Run Postgres on docker port 5434 and change the host to localhost on the file or
php.ini-development
05-08
http://php.net/configuration.file ; The syntax of the file is extremely simple. Whitespace and lines ; beginning with a semicolon are silently ignored (as you probably guessed). ; Section headers (e...
mysql关联两张表时的编码问题及解决办法
12-16
ALTER TABLE `表名` CHANGE `字段名` `字段名` VARCHAR(32) CHARACTER SET utf8 NOT NULL; ``` 这里的`VARCHAR(32)`应替换为字段的实际数据类型和长度。 在进行这些操作时，务必谨慎，因为这可能会影响到已存储...
输入http://localhost:8080/不能显示Tomcat主页解决方案
qq_41952474的博客
10-21 1万+
1.首先你得安装jdk，并配置环境变量。 注意：在浏览器输入http://localhost:8080前，必须先启动Tomcat服务器，即必须先启动\Tomcat x.0\bin文件下的start.bat程序，而且不能关闭该程序，否则打不开页面。 2.如果这些都配置好了仍旧打不开的话，检查一下你的端口号是否是8080； 查看方法：tomcat安装包下conf中的server.xml中可以找到...
Oracle访问https://localhost:5500/em不能登录怎么办？
雨云21的博客
05-31 8111
今天安装Oracle12c数据库，安装完成后用浏览器访问https://localhost:5500/em，发现无论我怎么用户名和密码都不能登录，一直提示账号或口令错误。 直到后面创建数据库才成功的解决这个问题 错误原因：没有设置用户名的口令 解决办法：使用DBCA新建一个数据库 打开“Database Configuration Assistant”，参考网址：新建一个数据库 新建成功后有个如下图所示的弹窗，点击“口令管理”进入口令管理设置口令 将想要使用的用户名的口令设置完成 然后打开浏览器访问.
Tomcat配置Https服务，访问https://localhost:8443
Cricket_7的博客
05-03 6662
1，生成密钥 生成密钥，其实就是生成key文件的操作（别名，生成协议，年份，密码，重复命名，文件名） keytool -genkeypair -alias xiaoshuai -keyalg RSA -validity 3650 -keypass 123456 -storepass 123456 -keystore xiaoshuai.keystore 创建文件夹Key，输入生成 ...
在Windows上出现“localhost拒绝连接”的问题
最新发布
mengran14的博客
01-12 5766
通过清除cookie和浏览器缓存解决localhost拒绝连接的问题
localhost拒绝访问的解决方法
热门推荐
qq_44146952的博客
11-03 3万+
loc alhost拒绝访问的解决方法 localhost、Tomcat的localhost:8080拒绝访问解决方案 但127.0.0.1:8080可以实现访问（win10系统） 看到大神的解决方法，在此做一下笔记！！！ 解决方案： 打开“我的电脑”，选择左上角的“计算机”中的“卸载或更改程序”。 点击“启用或关闭Windows功能”。 点击选中“Internet Information Ser...
使用PHP和Mysql实现基础论坛（功能包括：用户登录注册更改密码以及发表帖子，查看帖子并能够删除帖子）
05-05
实现一个基础论坛需要以下步骤： 1. 创建数据库和数据表 在 MySQL 中创建一个数据库和数据表，用于存储用户信息和帖子信息。可以使用 phpMyAdmin 或 MySQL 命令行来创建。 ``` CREATE DATABASE forum_db; USE forum_db; CREATE TABLE users ( id INT(6) UNSIGNED AUTO_INCREMENT PRIMARY KEY, username VARCHAR(30) NOT NULL, password VARCHAR(30) NOT NULL ); CREATE TABLE posts ( id INT(6) UNSIGNED AUTO_INCREMENT PRIMARY KEY, title VARCHAR(50) NOT NULL, content TEXT NOT NULL, author VARCHAR(30) NOT NULL, created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP, updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP ); ``` 2. 创建用户登录、注册、更改密码功能 在 PHP 中创建一个用户管理类，用于处理用户的登录、注册和更改密码功能。在类中，可以使用 PDO 来连接 MySQL 数据库，并执行 SQL 查询。 ``` class UserManager { private $db; function __construct() { $dsn = 'mysql:host=localhost;dbname=forum_db'; $username = 'root'; $password = ''; try { $this->db = new PDO($dsn, $username, $password); } catch (PDOException $e) { die('Database connection failed: ' . $e->getMessage()); } } function register($username, $password) { $stmt = $this->db->prepare('INSERT INTO users (username, password) VALUES (:username, :password)'); $stmt->bindParam(':username', $username); $stmt->bindParam(':password', $password); $stmt->execute(); } function login($username, $password) { $stmt = $this->db->prepare('SELECT * FROM users WHERE username = :username AND password = :password'); $stmt->bindParam(':username', $username); $stmt->bindParam(':password', $password); $stmt->execute(); $user = $stmt->fetch(PDO::FETCH_ASSOC); return $user; } function changePassword($username, $password) { $stmt = $this->db->prepare('UPDATE users SET password = :password WHERE username = :username'); $stmt->bindParam(':username', $username); $stmt->bindParam(':password', $password); $stmt->execute(); } } ``` 3. 创建帖子发布、查看和删除功能 在 PHP 中创建一个帖子管理类，用于处理帖子的发布、查看和删除功能。在类中，同样可以使用 PDO 来连接 MySQL 数据库，并执行 SQL 查询。 ``` class PostManager { private $db; function __construct() { $dsn = 'mysql:host=localhost;dbname=forum_db'; $username = 'root'; $password = ''; try { $this->db = new PDO($dsn, $username, $password); } catch (PDOException $e) { die('Database connection failed: ' . $e->getMessage()); } } function createPost($title, $content, $author) { $stmt = $this->db->prepare('INSERT INTO posts (title, content, author) VALUES (:title, :content, :author)'); $stmt->bindParam(':title', $title); $stmt->bindParam(':content', $content); $stmt->bindParam(':author', $author); $stmt->execute(); } function getPosts() { $stmt = $this->db->query('SELECT * FROM posts'); $posts = $stmt->fetchAll(PDO::FETCH_ASSOC); return $posts; } function deletePost($id) { $stmt = $this->db->prepare('DELETE FROM posts WHERE id = :id'); $stmt->bindParam(':id', $id); $stmt->execute(); } } ``` 4. 创建前端页面 在 HTML 中创建一个登录、注册、更改密码和帖子管理的前端页面。在页面中，可以使用 PHP 来处理用户输入和输出结果。 ``` <?php session_start(); require_once 'UserManager.php'; require_once 'PostManager.php'; $userManager = new UserManager(); $postManager = new PostManager(); if (isset($_POST['register'])) { $username = $_POST['username']; $password = $_POST['password']; $userManager->register($username, $password); } if (isset($_POST['login'])) { $username = $_POST['username']; $password = $_POST['password']; $user = $userManager->login($username, $password); if ($user) { $_SESSION['user'] = $user; } else { echo 'Login failed'; } } if (isset($_POST['change_password'])) { $username = $_SESSION['user']['username']; $password = $_POST['new_password']; $userManager->changePassword($username, $password); $_SESSION['user']['password'] = $password; } if (isset($_POST['create_post'])) { $title = $_POST['title']; $content = $_POST['content']; $author = $_SESSION['user']['username']; $postManager->createPost($title, $content, $author); } if (isset($_POST['delete_post'])) { $id = $_POST['id']; $postManager->deletePost($id); } if (isset($_SESSION['user'])) { $posts = $postManager->getPosts(); } ?> <!DOCTYPE html> <html> <head> <title>Forum</title> </head> <body> <?php if (isset($_SESSION['user'])): ?> <h1>Welcome <?php echo $_SESSION['user']['username']; ?></h1> <form method="post"> <label>New Password:</label> <input type="password" name="new_password"> <input type="submit" name="change_password" value="Change Password"> </form> <form method="post"> <label>Title:</label> <input type="text" name="title"> <label>Content:</label> <textarea name="content"></textarea> <input type="submit" name="create_post" value="Create Post"> </form> <table> <thead> <tr> <th>Title</th> <th>Content</th> <th>Author</th> <th>Created At</th> <th>Updated At</th> <th>Action</th> </tr> </thead> <tbody> <?php foreach ($posts as $post): ?> <tr> <td><?php echo $post['title']; ?></td> <td><?php echo $post['content']; ?></td> <td><?php echo $post['author']; ?></td> <td><?php echo $post['created_at']; ?></td> <td><?php echo $post['updated_at']; ?></td> <td> <form method="post"> <input type="hidden" name="id" value="<?php echo $post['id']; ?>"> <input type="submit" name="delete_post" value="Delete"> </form> </td> </tr> <?php endforeach; ?> </tbody> </table> <form method="post"> <input type="submit" name="logout" value="Logout"> </form> <?php else: ?> <form method="post"> <label>Username:</label> <input type="text" name="username"> <label>Password:</label> <input type="password" name="password"> <input type="submit" name="login" value="Login"> </form> <form method="post"> <label>Username:</label> <input type="text" name="username"> <label>Password:</label> <input type="password" name="password"> <input type="submit" name="register" value="Register"> </form> <?php endif; ?> </body> </html> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值