How to fix SSL wrong version number error in NuxtJS? - https

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