本地Vue.js应用如何配置证书访问要求SSL验证的远程开发API

方案1：配置devServer代理携带证书（推荐） #

这是本地开发最常用的方案，所有API请求走本地开发服务代理转发，由代理层携带客户端证书发起请求。

步骤1：准备证书文件 #

在项目根目录新建cert文件夹，将你的p12格式客户端证书放入该文件夹内（例：文件名为dev-client.p12），并将cert文件夹添加到.gitignore避免证书泄露。

步骤2：修改vue.config.js配置 #

修改后的完整配置如下：

const fs = require('fs')
const https = require('https')

module.exports = {
    devServer: {
        proxy: {
            "/api/v1": {
                // 修正原配置中的域名拼写错误：dev.exmpaple改为dev.example.com
                target: "https://dev.example.com",
                changeOrigin: true,
                // 新增agent配置，携带p12证书
                agent: new https.Agent({
                    pfx: fs.readFileSync('./cert/dev-client.p12'), // 替换为你的p12证书实际路径
                    passphrase: '你的p12证书密码', // 如果证书没有设置密码可删除该行
                    rejectUnauthorized: false // 开发环境可关闭自签证书校验，避免报错
                })
            },
        },
    },
};

说明：这里调整了target配置，去掉了末尾的/api/v1，所以不需要原来的pathRewrite配置，最终请求的地址会自动拼接为https://dev.example.com/api/v1/xxx，符合你的实际API路径规则。

步骤3：重启开发服务 #

修改完配置后停止当前npm run serve进程，重新启动后请求即可正常携带证书。

方案2：浏览器导入证书（无代理场景） #

如果你不使用devServer代理，直接在前端用axios请求跨域的API地址，可以直接把p12证书导入到本地浏览器中：

• 打开Chrome/Edge浏览器设置 → 隐私和安全 → 安全 → 管理设备证书
• 选择「个人」分类，点击导入，选择你的p12证书文件，输入证书密码完成导入
• 重启浏览器后，访问API时浏览器会自动携带客户端证书，即可正常请求

注意事项 #

• 客户端证书属于敏感信息，绝对不要提交到公共代码仓库
• 生产环境不要开启rejectUnauthorized: false配置，避免安全风险

内容的提问来源于stack exchange，提问作者dev-props