使用本地主机上的证书访问 api（vue.js 应用程序）

Question

我有 vue.js 使用 vue-cli 构建的应用程序。 App位于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": "" },
            },
        },
    },
};

Answer 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,
  }

使用本地主机上的证书访问 api（vue.js 应用程序）

Access to api with certificate on localhost (vue.js app)

html

javascript

ssl

vue.js

vue-cli