Influxdb reverse proxy behind nginx

Question

I have a VM which runs docker containers with influxdb and vue.js app. The app is connected to influxdb and works fine when I start it locally on http:ip. I'm encountering an issue while attempting to configure a Vue.js application with NGINX acting as a reverse proxy to access an InfluxDB instance over HTTPS (using Coder Workspace).

My setup involves: InfluxDB running on VM port 8086 NGINX configured with a reverse proxy using proxy_pass at location /influxdb/ to connect to the InfluxDB instance initialized at url/influxdb/ Vue.js application trying to access this InfluxDB instance via NGINX conf inside docker container

When the application is accessed over HTTP (http://ip) through nginx reverse proxy, it works fine, and the queries to InfluxDB are executed without any issues. However, upon configuring the proxy_pass to work over HTTPS, I encounter a 303 See Other response and fail to retrieve data.

My NGINX configuration snippet:

server {
    listen 80;
    listen 443 ssl;

    # SSL Configuration
    ssl_certificate /home/your_certificate.crt;
    ssl_certificate_key /home/your_private_key.key;

    # Other SSL settings
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_prefer_server_ciphers on;
    ssl_ciphers "EECDH+AESGCM:EDH+AESGCM:AES256+EECDH:AES256+EDH";
    ssl_session_cache shared:SSL:10m;
    ssl_session_timeout 10m;

    location / {
      root   /app;
      index  index.html;
      try_files $uri $uri/ /index.html;
    }

    location /influxdb/ {
      proxy_http_version 1.1;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection "upgrade";
      proxy_set_header Host $host;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header X-Forwarded-Proto $scheme;
      proxy_pass http://host.docker.internal:8086/;
      proxy_pass_header  Authorization;
     }

My influxdb initialization url code in .js and config has all credentials(url, token, org etc):

let url = (location.protocol == 'https:' ? 'https://':'http://') + window.location.host
const fullUrl = `${url}/influxdb/`; 

            this.influx = new InfluxDB({
                url: fullUrl,
                token: this.config.token
            }).getQueryApi(this.config.org);

            startQueryLoop(this);
        },

This is the output: Network monitor

I already tried solutions discussed at: text And this is what is working when accessed through http://ip and expected output: Expected post