how to fix error “net::ERR_SSL_SERVER_CERT_BAD_FORMAT” When useing vuejs and nodejs with https and express

问题

I have some code to send https request in vue.js and when use actions methods in vuex for send https request I get this error in console

GET https://localhost/api/getpeople net::ERR_SSL_SERVER_CERT_BAD_FORMAT

my code is :

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 server side:

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);
});

  })

this is code send https request and get response and set in to people and other code show people in to the table. other code is correct but problem from this code

i get console.log(key.certificate) and get this result:

回答1:

Taking the certificate PEM shown in the question one can do a openssl x509 -text and see:

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

Thus, this is a X509v1 certificate issued for localhost. It does not have any Subject Alternative Names extension as required by at least Chrome. Only X509v3 certificates can have such extensions and they need to be specifically configured. The documentation of pem contains examples on how to create certificates with the necessary extensions.

回答2:

axios performing a GET request, you should send data in 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
  })

and performing a POST request

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

now in your code you send POST request and this have object to send, you shod use

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

for GET request

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

来源：https://stackoverflow.com/questions/58248360/how-to-fix-error-neterr-ssl-server-cert-bad-format-when-useing-vuejs-and-nod

标签

node.js

Vue.js

ssl

https

vuex