【前端】使用HTTPS

原创已于 2025-06-08 00:02:52 修改 · 1k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #https #网络协议

于 2025-05-26 18:18:31 首次发布

前端🌟 专栏收录该内容

60 篇文章

订阅专栏

在前端本地开发环境中使用 HTTPS 主要取决于你用的是哪个构建工具（如 Vite、Webpack、Vue CLI 等）。

Vite

npm install --save-dev @types/node #安装 Node 类型定义
#@types/node 提供了 Node.js 内置模块的完整类型定义，TypeScript 编译器才能正确识别它们。

npm install mkcert --save-dev

#生成HTTPS本地证书 执行一次即可
npx mkcert create-ca
npx mkcert create-cert
#在项目中生成 cert.pem 和 key.pem 文件。
#证书一旦生成，无法修改，只能重新生成证书
npx mkcert create-cert --ca-key rootCA-key.key --ca-cert rootCA.crt localhost 127.0.0.1 mydomain.com
#--ca-key 指定上一步生成的 CA 私钥文件
#--ca-cert 指定 CA 证书文件
#后面的参数就是你想包含进证书的域名或 IP，可以多个

//打开 tsconfig.node.json，检查是否有 "types": ["node"]，如果没有，添加进去。
{
  "compilerOptions": {
    "module": "ESNext",
    "target": "ESNext",
    "moduleResolution": "Node",
    "types": ["node"]//内置node模块 这里⬇️
  }
}

//修改 vite.config.ts 或 vite.config.js
import { defineConfig } from 'vite'

import fs from 'fs'
import path from 'path'//这里⬇️

import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  server: {
    https: {//这里⬇️
      key: fs.readFileSync(path.resolve(__dirname, 'cert.key')),
      cert: fs.readFileSync(path.resolve(__dirname, 'cert.crt')),
    },
    host: 'localhost', // 或 0.0.0.0
    port: 5173,
  },
})

yarn dev  # 或 npm run dev

浏览器访问 https://localhost:5173，你需要信任证书（第一次访问会提示“不安全”，点击继续即可）。

文件名	含义
`cert.crt`	服务端的证书（公钥）
`ca.crt`	根证书（自签名时的 CA 证书）
`cert.key`	私钥（用来与 `cert.crt` 搭配）

# cert.key
-----BEGIN PRIVATE KEY-----
...
-----END PRIVATE KEY-----

#cert.crt
-----BEGIN CERTIFICATE-----
...
-----END CERTIFICATE-----

ca.crt是可选的，除非你想让浏览器信任你自签的证书链。
把你的 ca.crt 安装进系统或浏览器的信任根证书列表

macOS:用钥匙串访问（Keychain Access）导入

打开「钥匙串访问」App
拖入你的 ca.crt
设置「始终信任」

Windows:
4. 运行 certmgr.msc
5. 选择「受信任的根证书颁发机构」→「证书」
6. 右键选择「导入」→ 选择你的 ca.crt
7. 安装完成后，重新启动浏览器

不再显示不信任的警告 🚫🔒

Webpack

//在 webpack-dev-server 中启用 HTTPS：
// webpack.config.js
devServer: {
  https: true,
  host: 'localhost',
  port: 3000,
}

//配置自定义证书
https: {
  key: fs.readFileSync('./key.pem'),
  cert: fs.readFileSync('./cert.pem'),
},

本地生产环境 npx serve

serve 本身是支持 HTTPS 的，只需要加参数

npx serve -s dist --ssl-cert cert.pem --ssl-key key.pem

两个工具之间的关系
从功能角度来说，如果你用的是 Vite，用 vite preview 就完全可以替代 npx serve dist 来预览构建后的静态文件，而且 vite preview 是 Vite 官方集成的命令，兼容性和配置体验更好。推荐用 vite preview 来预览生产构建，特别是如果你要用 HTTPS，vite preview 支持直接配置更方便。
如果vite preview找不到，使用npx vite preview

工具	作用	需不需要卸载？
Vite	开发和构建工具，`yarn dev` 启动开发服务器，`yarn build` 生成静态文件	不能卸载，是你项目核心构建工具
npx serve	一个简单的静态文件服务器，用来本地预览构建后生成的 `dist` 目录	不用卸载，方便快速预览，但不是必须

npm uninstall -g serve卸载，可选清理缓存npm cache clean --force，这样npx serve dist 命令不再起作用

浏览器提示“不安全”解决方法

由于是自签证书，浏览器默认会提示不安全；
点击「高级」→「继续访问」即可；
若你希望不再提示，需要手动将 .pem 证书导入系统信任证书中。

IOS导入自签证书

注意导入根证书，不是该网站的证书

mkcert -CAROOT

在这个目录下，你会找到两个主要文件：
rootCA.pem (或 rootCA.crt): 这是 mkcert 生成的根 CA 证书文件。
rootCA-key.pem: 这是对应的根 CA 私钥文件。
你需要的就是 rootCA.pem 或 rootCA.crt 这个文件。你可以将其复制出来，并将其后缀名改为 .crt，然后按照之前讨论的步骤，将其导入到你的 iOS 设备并设置为完全信任。

电脑上能下载 .crt 证明文件存在且可读。文件权限要设置为所有人可读
iOS Safari 点击下载后显示 index.html 意味着它没有将 .crt 识别为特殊文件类型。这个差异性是由于 iOS Safari 对 MIME 类型（Content-Type 头部）的严格要求。问题核心依然是：你的 vite preview 服务器没有向 iOS Safari 发送正确的 Content-Type。请务必确认服务器响应头的 Content-Type。
iOS Safari 的严格性： iOS 操作系统对安全性有非常严格的要求。当遇到 .crt 或 .mobileconfig 这样的配置文件时，Safari 不仅仅是下载文件，它更会尝试启动系统的“安装描述文件”流程。为了触发这个特殊流程，Safari 必须收到一个非常精确的 MIME 类型：application/x-x509-ca-cert或 application/pkix-cert 如果不是这两个，Safari 就会将其视为普通文件（这可能导致下载 .txt），或者，更常见的是，它会将其视为一个普通的网页请求，并回退到你的单页应用（SPA）的 index.html。
- 解决方式
  如果你之前尝试了在 vite.config.js 中使用 configurePreviewServer 钩子来设置自定义 MIME 类型，请再次仔细检查：
  插件是否被正确引入。
  req.url 是否正确匹配了你的 .crt 文件路径？ (例如，如果文件在 public/my_root_ca.crt，URL 是 /my_root_ca.crt，那么 req.url.endsWith(‘.crt’) 应该匹配，并且 path.join(server.config.root, ‘public’, req.url) 应该能找到文件)。
  fs.existsSync(absoluteFilePath) 是否为 true？可以在插件内部加 console.log 语句来打印 absoluteFilePath 和 fs.existsSync 的结果进行调试。如果文件没找到，插件就不会拦截并设置正确的 MIME 类型。
  res.setHeader(‘Content-Type’, ‘application/x-x509-ca-cert’); 这行代码是否真的执行了？

// vite.config.js
import { defineConfig } from 'vite';
import path from 'path'; // 导入 path 模块
import fs from 'fs';     // 导入 fs 模块

export default defineConfig({
  plugins: [
    {
      name: 'configure-certs-mime',
      configurePreviewServer(server) {
        server.middlewares.use((req, res, next) => {
          if (req.url && req.url.endsWith('.crt')) {
            // 假设你的 .crt 文件在 public 目录的根部，例如 public/my_root_ca.crt
            // req.url 在这里会是 /my_root_ca.crt
            const absoluteFilePath = path.join(server.config.root, 'public', req.url);

            console.log(`[Vite Plugin] Request for .crt: ${req.url}`);
            console.log(`[Vite Plugin] Resolved path: ${absoluteFilePath}`);

            if (fs.existsSync(absoluteFilePath)) {
              console.log(`[Vite Plugin] File exists, setting Content-Type.`);
              const fileContent = fs.readFileSync(absoluteFilePath);
              res.setHeader('Content-Type', 'application/x-x509-ca-cert'); // 正确的MIME类型
              res.end(fileContent);
              return; // 阻止后续中间件处理
            } else {
              console.warn(`[Vite Plugin] .crt file not found at: ${absoluteFilePath}`);
            }
          }
          next(); // 不是 .crt 文件，或者文件不存在，继续下一个中间件
        });
      },
    },
  ],
  // 如果你还有其他配置，写在这里 下面的仅供参考
  preview: { //是npm run preview的
    https: {//这里⬇️
      key: fs.readFileSync(path.resolve(__dirname, '192.168.1.x-key.pem')),
      cert: fs.readFileSync(path.resolve(__dirname, '192.168.1.x.pem')),
    },
    host: '0.0.0.0',
    port: 5173, // 固定端口
    strictPort: true, // 如果端口被占用，直接报错而不是换端口
  },
  server: { //是npm run dev的
    https: {//这里⬇️
      key: fs.readFileSync(path.resolve(__dirname, '192.168.1.x-key.pem')),
      cert: fs.readFileSync(path.resolve(__dirname, '192.168.1.x.pem')),
    },
    host: '0.0.0.0', //慎用，监听所有可用接口，允许外部访问
    port: 5173, // 固定端口
    strictPort: true, // 如果端口被占用，直接报错而不是换端口
  },
});

打开之后点击连接下载->设置->已下载描述文件->安装

上传github注意不要把key传上去

把证书文件（比如 .pem、.key、.crt）加入 .gitignore，避免误上传。
使用环境变量或安全的配置管理方式来管理证书路径。
如果一定要存储证书，建议放在私有仓库或使用加密方式。
生产环境使用云服务或服务器的证书管理（如 Let’s Encrypt）来自动管理证书。

# 忽略证书和私钥
*.pem
*.key
*.crt