如何修复 NuxtJS 中的 SSL 版本号错误？

Question

我正在使用 nuxt.js 进行服务器端渲染。我必须将 HTTPS 应用到我的 nuxt 应用程序上，因此我应用了由 Certbot 生成的 SSL 证书。但是，我的 Nuxt 应用程序生成如下错误。

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

我的服务器是AWS EC2。我正在使用 Ubuntu 16.04、Nginx 和 Express。我尝试更改我的 nginx 代理策略，但它不起作用。

下面是我运行服务器的代码。

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

下面是我的 Nginx 配置。

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

该错误ssl3_get_record:wrong version number有时是由于 Nuxt 在没有有效证书（或使用自签名证书）的情况下通过 https 进行服务器端渲染而引起的。

如果您使用 nuxt-axios 执行 API 请求，您可以告诉 axioshttps如果它在浏览器中运行则使用，http如果它在服务器上运行则使用。

在你nuxt.config.js添加这个：

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

然后你可以在你的.vue或.js文件中使用 axios，如下所示：

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