使用 localhost 上的证书访问 api（vue.js 应用程序）答案

【问题标题】：Access to api with certificate on localhost (vue.js app)使用 localhost 上的证书访问 api（vue.js 应用程序）
【发布时间】：2021-10-24 02:24:55
【问题描述】：

我有使用 vue-cli 构建的 vue.js 应用程序。应用程序位于 dev.example.com，其余 api 位于 dev.example.com/api/v1/。后端添加 ssl 证书以保护开发人员。现在在本地主机上，当我尝试向 api 发出请求时出现错误 400。要访问开发域，我有 p12 证书。如何配置 vue.config.js 或 axios 以继续本地开发？

<head>
  <title>400 No required SSL certificate was sent</title>
</head>
<body bgcolor="white">
  <center>
    <h1>400 Bad Request</h1>
  </center>
  <center>No required SSL certificate was sent</center>
  <hr>
  <center>nginx</center>

vue.config.js：

module.exports = {
    devServer: {
        proxy: {
            "/api/v1": {
                target: "https://dev.exmpaple/api/v1",
                changeOrigin: true,
                pathRewrite: { "/api/v1": "" },
            },
        },
    },
};

【问题讨论】：

标签： javascript html vue.js ssl vue-cli

【解决方案1】：

因为您应该生成自己的证书并在配置中提供密钥。

module.exports = {
  devServer: {
    https: {
      cacert: './server.pem',
      pfx: './server.pfx',
      key: './server.key',
      cert: './server.crt',
      passphrase: 'webpack-dev-server',
      requestCert: true,
    },
  },
};

另外，您可以尝试设置https 自动生成ssl。

devServer: {
    https: true,
  }

【讨论】：