GET: ERR_SSL_PROTOCOL_ERROR nginx + vue.js

问题

In console log of Google Chrome I'm getting these errors :

GET https://192.168.1.7:8081/sockjs-node/info?t=1579798623564 net::ERR_SSL_PROTOCOL_ERROR
GET https://192.168.1.7/sockjs-node/info?t=1579798623562 net::ERR_CERT_COMMON_NAME_INVALID

if in /etc/nginx/conf/default.conf ( Ubuntu 18.04.03 Server Edition):

server {
    listen 443 ssl http2 default_server;
    server_name example.com www.example.com
    ssl_certificate /etc/ssl/certs/chained.pem;
    ssl_certificate_key /etc/ssl/private/domain.key;
    ssl_certificate /etc/ssl/certs/chained.pem;
    ssl_certificate_key /etc/ssl/private/domain.key;
    ssl_session_timeout 5m;
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2 TLSv1.3;
    ssl_prefer_server_ciphers on;
    ssl_session_cache shared:SSL:50m;
    ssl_dhparam /etc/ssl/certs/dhparam.pem;
    ssl_stapling on;
    ssl_stapling_verify on;

    add_header Strict-Transport-Security "max-age=31536000";
    location / {
        proxy_pass http://192.168.1.7:8081;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }
}

server {
    listen 80 default_server;
    listen [::]:80 default_server;
    server_name example.com www.example.com;
    return 301 https://$host$request_uri;
    add_header Strict-Transport-Security "max-age=31536000";
    location / {
        proxy_pass http://192.168.1.7:8080;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }
}

I setup vue.config.js as follows:

module.exports = {
  productionSourceMap: false,
  pluginOptions: {
    i18n: {
      enableInSFC: true
    }
  },
  devServer: {
    host: '192.168.1.7',
    hot: true,
    disableHostCheck: true
  }
}

and defined webpack.config.js as follows :

var path = require('path');
var fs = require('fs');

module.exports = {
    https: {
        key: fs.readFileSync('/etc/ssl/private/domain.key'),
        ca: fs.readFileSync('/etc/ssl/certs/chained.pem')
    }
};

Update 1)

Modifying in /etc/nginx/conf.d/default.conf http -> https:

location / {
    proxy_pass https://192.168.1.7:8081;

leads to 502 Bad Gateway :

So... my question is now: how to make the nginx server answer with TLS?

What am I doing wrongly? How to solve the problem?

回答1:

GET https://192.168.1.7:8081/sockjs-node/info?t=1579798623564 net::ERR_SSL_PROTOCOL_ERROR
 ...
proxy_pass http://192.168.1.7:8081;

In the nginx configuration you access 192.168.1.7:8081 as http://´. In the first line you access the same IP:port withhttps://which results in a protocol error. While nothing is known about the server on this IP:port it is very likely that is onlyhttp://` which would explain the protocol error: attempt to do a TLS handshake against a server which does not answer with TLS.

GET https://192.168.1.7/sockjs-node/info?t=1579798623562 net::ERR_CERT_COMMON_NAME_INVALID

Nothing is known about the certificate on 192.168.1.7:443 (443 is default port for https) but very likely this certificate does not contain 192.168.1.7 as valid IP SAN. But this is the expected value for certificate verication when using the URL https://192.168.1.7/.

来源：https://stackoverflow.com/questions/59883945/get-err-ssl-protocol-error-nginx-vue-js

标签

Vue.js

ssl

nginx

Webpack

ubuntu-18.04