使用带有 https 和 express 的 vuejs 和 nodejs 时如何修复错误“net::ERR_SSL_SERVER_CERT_BAD_FORMAT”答案

【问题标题】：how to fix error "net::ERR_SSL_SERVER_CERT_BAD_FORMAT" When useing vuejs and nodejs with https and express使用带有 https 和 express 的 vuejs 和 nodejs 时如何修复错误“net::ERR_SSL_SERVER_CERT_BAD_FORMAT”
【发布时间】：2020-02-03 11:57:24
【问题描述】：

我有一些代码可以在 vue.js 中发送 https 请求，当使用 vuex 中的操作方法发送 https 请求时，我在控制台中收到此错误

获取https://localhost/api/getpeople 网络::ERR_SSL_SERVER_CERT_BAD_FORMAT

我的代码是：

vue.js table.js

 import Axios from "axios";

 let state = {
people: []
  };

     let getters = {
     getPeople(state) {
         return state.people;
    }
}

      let mutations = {

    setPeople(state, people) {

          state.people = people
        }

       }

            let actions = {
            sendHttpReq({ commit }) {
             Axios.get('https://localhost:443/api/getpeople').then(response=>response.data).then(result=>{
                   commit('setPeople',result);
               }).catch(error=>{
             console.log(error.response)
        })
    }
}

    export default {
       state,
        getters,
        mutations,
       actions
              }

Node.js 服务器端：

let express=require('express');
  let cors=require('cors');
  let https=require('https');
  let pem=require('pem');
  let mydb=require('./mydb')
  pem.createCertificate({days:1,selfSigned: true},(err,keys)=> {

if (err)
    return err;


let app = express();
app.use(express.json());
app.use(cors());
app.post('/api/setPeople', (req, res) => {
    let body = req.body;
    mydb.insert(body.firstName, body.lastName, body.phone, (result) => {
        res.status(200).send(result)
    });


});
app.get('/api/getpeople', async (req, res) => {
    mydb.getPoeple((result) => {
        console.log(result);
        res.status(200).send(result)
    });
});

https.createServer({key: keys.serviceKey, cert: keys.certificate}, app).listen(443, () => {
    console.log('server is run ' + 443);
});

  })

这是代码发送 https 请求并获取响应并设置到人员和其他代码显示人员到表中。其他代码是正确的，但此代码有问题

我得到 console.log(key.certificate) 并得到这个结果：

【问题讨论】：

错误消息指向错误的证书，但您没有提供有关服务器证书的任何信息。请提供openssl x509 -in cert.pem -text -noout 的证书或（可能已编辑）输出。
我使用 pem 模块创建密钥
pem 模块只使用 openssl，因此结果取决于您拥有的 OpenSSL 版本和使用的配置。执行console.log(keys.certificate) 以将证书输出为字符串并在您的问题中提供结果。
我得到console.log(keys.certificate) 并将结果设置为问题

标签： node.js vue.js ssl https vuex

【解决方案1】：

axios 执行GET 请求，您应该在 url 中发送数据

axios.get('/user?ID=12345')
  .then(function (response) {
    // handle success
    console.log(response);
  })
  .catch(function (error) {
    // handle error
    console.log(error);
  })
  .finally(function () {
    // always executed
  })

并执行POST 请求

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

现在在您的代码中您发送 POST 请求并且这有要发送的对象，您应该使用

Axios.post('https://localhost:443/api/getpeople',{ withCredentials: 
             true}).then(response=>response.data).then(result=>{
                   commit('setPeople',result);
               }).catch(error=>{
             console.log(error.response)

对于 GET 请求

Axios.get('https://localhost:443/api/getpeople').then(response=>response.data).then(result=>{
                   commit('setPeople',result);
               }).catch(error=>{
             console.log(error.response)

【讨论】：

这个对象 { withCredentials:true} 是错误的，不需要
不，您应该发送带有对象的 POST 请求，而不是带有对象数据的 GET 以发送到服务器端。 if GET data { withCredentials:true} 从代码中删除它。
Axios.post('https://localhost:443/api/getpeople',{ withCredentials: true}) 使用 Axios.post。删除 GET Axios.get('https://localhost:443/api/getpeople') 的对象
是的，我知道并且我删除了对象但它仍然不起作用

【解决方案2】：

获取问题中显示的证书 PEM 可以执行openssl x509 -text 并查看：

Certificate:
    Data:
        Version: 1 (0x0)
        ...
    Signature Algorithm: sha256WithRSAEncryption
        Issuer: CN=localhost
        ...
        Subject: CN=localhost

因此，这是为 localhost 颁发的 X509v1 证书。它没有至少 Chrome 要求的任何主题备用名称扩展。只有 X509v3 证书可以有这样的扩展，需要专门配置。 documentation of pem 包含有关如何创建具有必要扩展名的证书的示例。

【讨论】：

对不起，我收到此错误ERR_CONNECTION_REFUSED
@Ashkanhaghshenas：我不知道你做了什么，这意味着我也不知道你做错了什么。但是 ERR_CONNECTION_REFUSED 意味着首先无法访问服务器。确保它实际上已启动并正在运行，并且没有显示任何错误并且可以从您的客户端访问。