Encountering: ERR_SSL_PROTOCOL_ERROR nginx with vue.js

When I check the console log in Google Chrome, I am encountering 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

https://i.stack.imgur.com/MjPfC.jpg

If I navigate to /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 have configured vue.config.js as follows:

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

and webpack.config.js is defined like this:

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)

Changing http to https in /etc/nginx/conf.d/default.conf:

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

This change results in a 502 Bad Gateway error: https://i.stack.imgur.com/bmgsH.jpg

My current concern is: how can I configure the nginx server to respond with TLS?

What am I missing? How can I resolve this issue?

Answer №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;

When configuring nginx, accessing 192.168.1.7:8081 is done using http://. However, in the first line, the access is attempted with https://, resulting in a protocol error. It's probable that the server on this IP:port only supports http://, leading to the protocol error as it tries to initiate a TLS handshake which the server does not respond to.

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

The certificate for 192.168.1.7:443 (443 being the default port for HTTPS) likely does not include 192.168.1.7 as a valid IP SAN. This results in an error when trying to verify the certificate for https://192.168.1.7/.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Solving issues with Dreamhost, Passenger, and Django

I had a website that was successfully running on Dreamhost with Passenger and Django for many years. However, recently, without any notification, it seems that Dreamhost updated Passenger, causing my website to go down last Thursday. This is the installed ...

Solving the CORS problem between Vue.js and Flask: Troubleshooting XMLHttpRequest Blockade

Description: Currently working on developing a web application utilizing Vue.js for the frontend and Flask for the backend. The initial phase involves creating a simple login page, but encountering CORS (Cross-Origin Resource Sharing) issues when making r ...

An error occurred: gyp ERR! stack - The command `python -c import sys; print "%s.%s.%s" % sys.version_info[:3]` has failed

While attempting to npm install in a Vue project, I encountered an error even after running vue create (name): npm ERR! gyp verb check python checking for Python executable "c:\Python310\python.exe" in the PATH npm ERR! gyp verb `which` ...

The Selenium test functions correctly in the production environment, however it encounters issues when run

I am facing an issue with my Vue.js application while writing Selenium tests. The test passes when run against the deployed production version of the app, but fails when run against a local version. When running the app locally, it is not from a build, bu ...

Utilizing Selenium to Override SSL Certification in Internet Explorer Using Python

After extensive research on this issue, I have yet to come across any viable solutions. My current project involves writing a script using Selenium to automate logging into a specific website. However, my efforts are being hindered by a certificate warning ...

What is the most efficient method for transferring Flask variables to Vue?

I am currently developing a visualization application using a flask server and vue.js for the front end. Other discussions on this topic explore how to avoid conflicts between vue.js and flask variable syntax, as shown here. In my scenario, I'm inte ...

The occurrence of a WSGI/Nginx/Internal server error occurs when the virtual environment is disabled due to the absence of a python

Having trouble with an error message that says, "-— no python application found, check your startup logs for errors —- Internal server error." Everything works fine when I'm in a virtual environment, but as soon as I deactivate it, I keep encount ...

An error of 'Address already being used' encountered while utilizing cookiecutter-flask

My operating system is OS X 10.14.3 and I am attempting to utilize the impressive cookiecutter-flask project. I have diligently followed the instructions provided in the README.rst: cookiecutter https://github.com/sloria/cookiecutter-flask.git # My test p ...

Flask static serving causes Vue app to not render

Currently, I am in the process of developing a basic web application utilizing Flask for the backend and Vue for the client side. Here is an overview of my folder structure: . ├── client/ │ ├── dist/ │ │ ├── css/ │ │ ...

Django Vue3 encounters access-control-allow-origin restriction

I am currently working on a Django rest-api project that uses Vue on the front-end. Unfortunately, I encountered an error while making requests via Vue: Console output: The following error is displayed: Access to XMLHttpRequest at 'https://api.iyziw ...

jinja2.exceptions.UndefinedError: The variable 'asset' has not been defined

Currently in my project, I am using a Python backend to fetch data from an API and then rendering it through Flask to the Vue.js frontend. However, I have encountered an error titled that is causing some issues. I have double-checked and printed the varia ...

An issue has arisen with MQTT on the Raspberry Pi involving SSL: [UNSUPPORTED_PROTOCOL] indicating that an unsupported protocol is being used (_ssl.c

An issue has arisen with my MQTT broker running on an AWS server. While it operates correctly on Mac and Windows devices, it does not function as expected on my Raspberry Pi. The subscriber and publisher code have been tested on various operating systems, ...

Executing a python script on the client side with the help of Vue.js

Because of restricted computation capabilities, I need to execute a python script on the user's browser. Currently, my website utilizes Vue.js for the frontend and Django for the backend. Do you have any suggestions on how I can specifically run thi ...

Deploying static files with Django in a production environment

My Django application is functioning properly on Ubuntu 14.04 with nginx 1.10, Django 1.10.2, and uWSGI 2.0.14. It is able to load static files such as JavaScript, CSS, and images, but the CSS files are not being applied to my website. Below is the configu ...