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

Question

我有使用 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": "" },
            },
        },
    },
};

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

Webpack 版本高于 v4.4.0+

在新的 webpack 版本中https选项已被弃用，您需要指定devServer.server.options以使用自己的证书：

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

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

问题描述

1 个解决方案

解决方案1
0 已采纳 2021-08-23 19:00:42

Webpack 版本高于 v4.4.0+

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

问题描述

1 个解决方案

解决方案1 0 已采纳 2021-08-23 19:00:42

Webpack 版本高于 v4.4.0+

解决方案1
0 已采纳 2021-08-23 19:00:42