How to fix SSL wrong version number error in NuxtJS?

Question

I'm using nuxt.js to Server Side Rendering. I have to apply HTTPS onto my nuxt application, so I applied SSL certificate which is generated by Certbot. However, my Nuxt application generates an error which is like the below.

 ERROR  write EPROTO 140118450071360:error:1408F10B:SSL routines:ssl3_get_record:wrong version number:../deps/openssl/openssl/ssl/record/ssl3_record.c:252:

My server is AWS EC2. and I'm using Ubuntu 16.04, Nginx, and Express. I've tried to change my nginx proxy policy, but it doesn't work.

The below is my code which runs a server.

/**
 * Module dependencies.
 */

var app = require('../app');
var debug = require('debug')('server:server');
var http = require('http');
var fs = require('fs');
var https = require('https');
var tls = require("tls");
var db = require('../models');

/**
 * Get port from environment and store in Express.
 */

tls.DEFAULT_ECDH_CURVE = "auto";
const serverAddress = require('../config').serverAddress
const port = 3000

if (serverAddress === '') {
    console.log("deploy enter #####");

    // Certificate
    const privateKey = fs.readFileSync("", "utf8");
    const certificate = fs.readFileSync("", "utf8");
    const ca = fs.readFileSync("", "utf8");

    const credentials = {
        key: privateKey,
        cert: certificate
    };

    /**
     * Create HTTPS server.
     */

    https.createServer(credentials, app).listen(port, function() {
        db.sequelize
            .authenticate().then(() => {
                console.log('Connection has been established successfully.');
                db.sequelize.sync();

            }).catch((err) => {
                console.error('Unable to connect to the database:', err);
            })
    });

} else {
    console.log("local enter #####");

    /**
     * Listen on provided port, on all network interfaces.
     */
    var http = require('http')
    var server = http.createServer(app);

    app.set('port', port);

    server.listen(port);
    server.on('error', onError);
    server.on('listening', onListening);
}

/**
 * Normalize a port into a number, string, or false.
 */

function normalizePort(val) {
  var port = parseInt(val, 10);

  if (isNaN(port)) {
    // named pipe
    return val;
  }

  if (port >= 0) {
    // port number
    return port;
  }

  return false;
}

/**
 * Event listener for HTTP server "error" event.
 */

function onError(error) {
  if (error.syscall !== 'listen') {
    throw error;
  }

  var bind = typeof port === 'string'
    ? 'Pipe ' + port
    : 'Port ' + port;

  // handle specific listen errors with friendly messages
  switch (error.code) {
    case 'EACCES':
      console.error(bind + ' requires elevated privileges');
      process.exit(1);
      break;
    case 'EADDRINUSE':
      console.error(bind + ' is already in use');
      process.exit(1);
      break;
    default:
      throw error;
  }
}

/**
 * Event listener for HTTP server "listening" event.
 */

function onListening() {
  var addr = server.address();
  var bind = typeof addr === 'string'
    ? 'pipe ' + addr
    : 'port ' + addr.port;
  debug('Listening on ' + bind);
}

and the below is my Nginx Configuration.

server {
        # Note: You should disable gzip for SSL traffic.
        # See: https://bugs.debian.org/773332
        #
        # Read up on ssl_ciphers to ensure a secure configuration.
        # See: https://bugs.debian.org/765782
        #
        # Self signed certs generated by the ssl-cert package
        # Don't use them in a production server!
        #
        # include snippets/snakeoil.conf;

        # Add index.php to the list if you are using PHP
        index index.html index.htm index.nginx-debian.html;
        server_name mysterico.com; # managed by Certbot


        location / {
                # First attempt to serve request as file, then
                # as directory, then fall back to displaying a 404.
                try_files $uri $uri/ =404;
                proxy_pass http://127.0.0.1:8080;
        }

    listen [::]:443 ssl http2 ipv6only=on; # managed by Certbot
    listen 443 ssl; # managed by Certbot
    gzip off;
    ssl_certificate /etc/letsencrypt/live/.../fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/.../privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot
}

server {
    if ($host = mysterico.com) {
        return 301 https://$host$request_uri;
    }

    listen 80;
    listen [::]:80;
    server_name mysterico.com;
    return 404;
}

Answer 1

The error ssl3_get_record:wrong version number is sometimes caused by Nuxt doing its server-side rendering over https without valid certificates (or with self-signed certificates).

In case you are using nuxt-axios to do the API requests, you can tell axios to use https if it is run from within the browser, and use http if it is run on the server.

In your nuxt.config.js add this:

publicRuntimeConfig: {
    axios: {
      // this is the url used on the server:
      baseURL: "http://localhost:8080/api/v1",
      // this is the url used in the browser:
      browserBaseURL: "https://localhost:8443/api/v1",
    },
},

Then you can use axios in your .vue or .js files like this:

methods: {
    getSomeData() {
      const $axios = this.$nuxt.$axios
      return $axios.$post('/my/data').then((result) => {
        // do something with the data
      })
    },
}