自签名SSL证书导致文件上传报错

Question

前端："ant-design-vue": "^1.6.2",
后端："egg": "^2.15.1",
这套前后端，正常本地运行时是http的，现在想变成https的，我使用OpenSSL生成SSL证书后，的确变成了https，但是在做文件上传的时候报错
mock.js:8404 POST https://10.234.56.789:7001/decision_add net::ERR_CERT_AUTHORITY_INVALID
查了下，大概是因为证书是自签名的，问问各位有没有什么办法解决这个问题，还是用自签名的证书

Answer 1

上午好☀️☀️☀️️
本答案参考通义千问

在使用自签名 SSL 证书时，确实会遇到浏览器或客户端认为该证书不可信的问题，从而导致文件上传等操作失败。这种错误（net::ERR_CERT_AUTHORITY_INVALID）是因为浏览器/客户端不信任该证书的颁发机构（CA）。

---

✅ 解决方案

1. 信任自签名证书（适用于开发环境）

如果你只是在本地开发环境中使用自签名证书，可以手动将证书添加到系统信任列表中。这在开发阶段是可行的，但不适合生产环境。

步骤如下：

• Windows 系统：

  • 打开 Chrome 或 Edge 浏览器。
  • 访问你的 HTTPS 地址（例如 https://10.234.56.789:7001）。
  • 出现证书警告页面后，点击“高级” -> “继续访问此网站（不推荐）”。
  • 然后进入浏览器设置，找到“管理证书” -> “受信任的根证书颁发机构”，导入你生成的 .crt 文件。

• MacOS 系统：

  • 双击 .crt 文件，打开“钥匙串访问”。
  • 将证书拖入“始终信任”下的“系统”钥匙串。
  • 输入密码以完成信任设置。

• Linux 系统：

  • 使用命令行安装证书：

    sudo cp your_certificate.crt /usr/local/share/ca-certificates/
    sudo update-ca-certificates
    

注意： 这种方法只适用于开发环境，生产环境必须使用由权威 CA 颁发的证书。

---

2. 修改前端代码忽略 SSL 证书验证（仅限开发）

如果你不想手动信任证书，可以在开发环境中暂时忽略 SSL 验证（不推荐用于生产），但这可能带来安全风险。

前端（Vue + ant-design-vue）：

你可以通过配置 Axios 或直接使用 fetch 来忽略 SSL 验证（仅用于开发）：

// 在 Vue 组件中使用 axios 示例
import axios from 'axios';

const instance = axios.create({
  baseURL: 'https://10.234.56.789:7001',
  // 忽略 SSL 证书验证（仅开发环境）
  httpsAgent: new require('https').Agent({ rejectUnauthorized: false })
});

instance.post('/decision_add', formData).then(...);

注意： 此方式仅适用于开发环境，不要用于生产环境，因为这会带来严重的安全风险。

---

3. 使用反向代理（如 Nginx）并使用正式证书

这是最推荐的方式，尤其是在生产环境中。你可以使用 Nginx 作为反向代理，使用正式的 SSL 证书，然后将请求转发到后端服务（Egg.js）。

Nginx 配置示例：

server {
    listen 443 ssl;
    server_name yourdomain.com;

    ssl_certificate /path/to/fullchain.pem; # 你的正式证书
    ssl_certificate_key /path/to/privkey.pem;

    location / {
        proxy_pass http://10.234.56.789:7001;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

这样，用户访问的是正式证书的 HTTPS 网站，而后端服务仍然运行在 HTTP 上，无需处理 SSL 问题。

---

4. 使用 Let's Encrypt 免费证书（推荐生产环境）

如果你需要一个免费且被广泛信任的 SSL 证书，可以使用 Let's Encrypt。

步骤如下：

1. 安装 Certbot 工具。
2. 通过 Certbot 获取证书，并配置 Nginx 或 Apache 自动更新证书。
3. 将证书路径配置到 Egg.js 的 HTTPS 服务器中。

---

🛠️ 总结：推荐方案

| 情况 | 推荐方案 | |------|----------| | 开发环境 | 手动信任自签名证书 或 使用 rejectUnauthorized: false（仅限开发） | | 生产环境 | 使用 Nginx 反向代理 + Let's Encrypt 证书 |

---

🔐 最终建议

不要在生产环境中使用自签名证书！
自签名证书无法被浏览器和客户端信任，会导致大量安全警告和功能异常。建议使用 Let's Encrypt 或购买商业 SSL 证书。

---

如果你愿意提供你生成的证书信息（如 .csr, .key, .crt），我可以帮你生成更具体的配置内容。