Nuxt 2 server running in the frontend docker container not able to communicate with express API in the backend docker container in 2 separate files

  • I apologize if this is a long post.
  • I have 2 VSCode projects: a nuxt.js VERSION 2 frontend and a node.js express backend that acts as the API.
  • Each of them has a separate docker-compose file with its own nginx server and self generated SSL certificates that work on localhost
  • I am not able to connect with frontend with the backend to make API requests

Project Structure Frontend

docker
├── development
│   ├── nginx_server
│   │   └── Dockerfile
│   ├── nginx_server_certs
│   │   ├── Dockerfile
│   │   └── ...
│   ├── nuxt_server
│   │   └── Dockerfile
│   ├── docker-compose.yml
│   └── .env
└── production
    └── ...
pages
components
nuxt.config.js
package.json
...

Project Structure backend

docker
├── development
│   ├── nginx_server
│   │   └── Dockerfile
│   ├── nginx_server_certs
│   │   ├── Dockerfile
│   │   └── ...
│   ├── node_server
│   │   └── Dockerfile
│   ├── ...
│   ├── docker-compose.yml
│   └── .env
└── production
    └── ...
src
package.json
tsconfig.json
...

My nuxt server runs on port 31271 in the frontend docker-compose file and nginx runs on 80 for HTTP and 443 for HTTPS
Frontend docker-compose.yml

name: ch_ui_dev
services:
  ch_ui_dev_nginx:
    build:
      context: ../..
      dockerfile: ./docker/development/nginx_server/Dockerfile
    container_name: ch_ui_dev_nginx
    depends_on:
      ch_ui_dev_nuxt:
        condition: service_started
      ch_ui_dev_nginx_certs:
        condition: service_completed_successfully
    image: ch_ui_dev_nginx_image
    ports:
      - '80:80'
      - '443:443'
    restart: 'always'
    networks:
      - network
    volumes:
      - nginx_certs:/etc/nginx/nginx_certs

  ch_ui_dev_nginx_certs:
    build:
      context: ../..
      dockerfile: ./docker/development/nginx_server_certs/Dockerfile
    container_name: ch_ui_dev_nginx_certs
    env_file:
      - .env
    image: ch_ui_dev_nginx_certs_image
    networks:
      - network
    volumes:
      - nginx_certs:/home/nginx_certs/files

  ch_ui_dev_nuxt:
    build:
      context: ../..
      dockerfile: ./docker/development/nuxt_server/Dockerfile
    container_name: ch_ui_dev_nuxt
    env_file:
      - .env
    image: ch_ui_dev_nuxt_image
    networks:
      - network
    restart: 'always'
    ports:
      - '31271:31271'
    volumes:
      - nuxt_src:/home/node
      - node_modules:/home/node/node_modules

networks:
  network:
    external: true

volumes:
  nginx_certs:
    driver: local
  node_modules:
    driver: local
  nuxt_src:
    driver_opts:
      type: none
      device: /Users/vr/Desktop/code/ch/ui/
      o: bind

Frontend nginx container configuration for the nuxt server

pid                  /tmp/nginx.pid;
worker_processes     auto;
worker_rlimit_nofile 65535;

# Load modules
include              /etc/nginx/modules-enabled/*.conf;

events {
    multi_accept       on;
    worker_connections 65535;
}

http {
    charset                utf-8;
    sendfile               on;
    tcp_nopush             on;
    tcp_nodelay            on;
    server_tokens          off;
    types_hash_max_size    2048;
    types_hash_bucket_size 64;
    client_max_body_size   16M;

    # MIME
    include                mime.types;
    default_type           application/octet-stream;

    # Logging
    access_log             off;
    error_log              /var/log/nginx/error.log error;

    # Limits
    limit_req_log_level    warn;
    limit_req_zone         $binary_remote_addr zone=login:10m rate=10r/m;

    # SSL
    ssl_session_timeout    1d;
    ssl_session_cache      shared:SSL:10m;
    ssl_session_tickets    off;

    # Diffie-Hellman parameter for DHE ciphersuites
    ssl_dhparam            /etc/nginx/nginx_certs/dhparam.pem;

    # Mozilla Intermediate configuration
    ssl_protocols          TLSv1.2 TLSv1.3;
    ssl_ciphers            ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:DHE-RSA-AES128-GCM-SHA256:DHE-RSA-AES256-GCM-SHA384;

    # OCSP Stapling
    ssl_stapling           on;
    ssl_stapling_verify    on;
    resolver               1.1.1.1 1.0.0.1 [2606:4700:4700::1111] [2606:4700:4700::1001] 8.8.8.8 8.8.4.4 [2001:4860:4860::8888] [2001:4860:4860::8844] 208.67.222.222 208.67.220.220 [2620:119:35::35] [2620:119:53::53] valid=60s;
    resolver_timeout       2s;

    # Connection header for WebSocket reverse proxy
    map $http_upgrade $connection_upgrade {
        default upgrade;
        ""      close;
    }

    map $remote_addr $proxy_forwarded_elem {

        # IPv4 addresses can be sent as-is
        ~^[0-9.]+$        "for=$remote_addr";

        # IPv6 addresses need to be bracketed and quoted
        ~^[0-9A-Fa-f:.]+$ "for="[$remote_addr]"";

        # Unix domain socket names cannot be represented in RFC 7239 syntax
        default           "for=unknown";
    }

    map $http_forwarded $proxy_add_forwarded {

        # If the incoming Forwarded header is syntactically valid, append to it
        "~^(,[ \t]*)*([!#$%&'*+.^_`|~0-9A-Za-z-]+=([!#$%&'*+.^_`|~0-9A-Za-z-]+|"([\t \x21\x23-\x5B\x5D-\x7E\x80-\xFF]|\\[\t \x21-\x7E\x80-\xFF])*"))?(;([!#$%&'*+.^_`|~0-9A-Za-z-]+=([!#$%&'*+.^_`|~0-9A-Za-z-]+|"([\t \x21\x23-\x5B\x5D-\x7E\x80-\xFF]|\\[\t \x21-\x7E\x80-\xFF])*"))?)*([ \t]*,([ \t]*([!#$%&'*+.^_`|~0-9A-Za-z-]+=([!#$%&'*+.^_`|~0-9A-Za-z-]+|"([\t \x21\x23-\x5B\x5D-\x7E\x80-\xFF]|\\[\t \x21-\x7E\x80-\xFF])*"))?(;([!#$%&'*+.^_`|~0-9A-Za-z-]+=([!#$%&'*+.^_`|~0-9A-Za-z-]+|"([\t \x21\x23-\x5B\x5D-\x7E\x80-\xFF]|\\[\t \x21-\x7E\x80-\xFF])*"))?)*)?)*$" "$http_forwarded, $proxy_forwarded_elem";

        # Otherwise, replace it
        default "$proxy_forwarded_elem";
    }

    # Load configs
    include /etc/nginx/conf.d/*.conf;
}

# configuration file /etc/nginx/mime.types:

types {
    text/html                                        html htm shtml;
    text/css                                         css;
    text/xml                                         xml;
    image/gif                                        gif;
    image/jpeg                                       jpeg jpg;
    application/javascript                           js;
    application/atom+xml                             atom;
    application/rss+xml                              rss;
}

# configuration file /etc/nginx/conf.d/default.conf:
server {
    listen       8080;
    server_name  localhost;

    #access_log  /var/log/nginx/host.access.log  main;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }

    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }

    # proxy the PHP scripts to Apache listening on 127.0.0.1:80
    #
    #location ~ .php$ {
    #    proxy_pass   http://127.0.0.1;
    #}

    # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
    #
    #location ~ .php$ {
    #    root           html;
    #    fastcgi_pass   127.0.0.1:9000;
    #    fastcgi_index  index.php;
    #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
    #    include        fastcgi_params;
    #}

    # deny access to .htaccess files, if Apache's document root
    # concurs with nginx's one
    #
    #location ~ /.ht {
    #    deny  all;
    #}
}


# configuration file /etc/nginx/conf.d/example.local.conf:
server {
    listen              443 ssl http2;
    listen              [::]:443 ssl http2;
    server_name         www.example.local;

    # SSL
    ssl_certificate     /etc/nginx/nginx_certs/nginx-self-signed.crt;
    ssl_certificate_key /etc/nginx/nginx_certs/nginx-self-signed.key;

    # security
    include             nginxconfig.io/security.conf;

    # logging
    error_log           /var/log/nginx/error.log error;

    # reverse proxy
    location / {
        proxy_pass            http://ch_ui_dev_nuxt:31271/;
        proxy_set_header Host $host;
        include               nginxconfig.io/proxy.conf;
    }

    # additional config
    include nginxconfig.io/general.conf;
}

# non-www, subdomains redirect
server {
    listen              443 ssl http2;
    listen              [::]:443 ssl http2;
    server_name         .example.local;

    # SSL
    ssl_certificate     /etc/nginx/nginx_certs/nginx-self-signed.crt;
    ssl_certificate_key /etc/nginx/nginx_certs/nginx-self-signed.key;

    # logging
    error_log           /var/log/nginx/error.log error;
    return              301 https://www.example.local$request_uri;
}

# HTTP redirect
server {
    listen      80;
    listen      [::]:80;
    server_name .example.local;

    # logging
    error_log   /var/log/nginx/error.log error;
    return      301 https://www.example.local$request_uri;
}

# configuration file /etc/nginx/nginxconfig.io/security.conf:
# security headers
add_header X-XSS-Protection          "1; mode=block" always;
add_header X-Content-Type-Options    "nosniff" always;
add_header Referrer-Policy           "no-referrer-when-downgrade" always;
add_header Content-Security-Policy   "default-src 'self' http: https: ws: wss: data: blob: 'unsafe-inline' 'unsafe-eval'; frame-ancestors 'self';" always;
add_header Permissions-Policy        "interest-cohort=()" always;
add_header Strict-Transport-Security "max-age=31536000; includeSubDomains; preload" always;

# . files
location ~ /.(?!well-known) {
    deny all;
}

# security.txt
location /security.txt {
    return 301 /.well-known/security.txt;
}

location = /.well-known/security.txt {
    alias ~/security.txt;
}

# configuration file /etc/nginx/nginxconfig.io/proxy.conf:
proxy_http_version                 1.1;
proxy_cache_bypass                 $http_upgrade;

# Proxy SSL
proxy_ssl_server_name              on;

# Proxy headers
proxy_set_header Upgrade           $http_upgrade;
proxy_set_header Connection        $connection_upgrade;
proxy_set_header X-Real-IP         $remote_addr;
proxy_set_header Forwarded         $proxy_add_forwarded;
proxy_set_header X-Forwarded-For   $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header X-Forwarded-Host  $host;
proxy_set_header X-Forwarded-Port  $server_port;

# Proxy timeouts
proxy_connect_timeout              60s;
proxy_send_timeout                 60s;
proxy_read_timeout                 60s;

# configuration file /etc/nginx/nginxconfig.io/general.conf:
# favicon.ico
location = /favicon.ico {
    log_not_found off;
}

# robots.txt
location = /robots.txt {
    log_not_found off;
}

# gzip
gzip            on;
gzip_vary       on;
gzip_proxied    any;
gzip_comp_level 6;
gzip_types      text/plain text/css text/xml application/json application/javascript application/rss+xml application/atom+xml image/svg+xml;

My node server runs on port 34273 in the backend docker-compose file and nginx runs here on 8080 for HTTP and 8443 for HTTPS
Backend docker-compose.yml

version: '3.9'
name: ch_api_dev
services:
  ch_api_dev_nginx:
    build:
      context: ../..
      dockerfile: ./docker/development/nginx_server/Dockerfile
    container_name: ch_api_dev_nginx
    depends_on:
      ch_api_dev_node:
        condition: service_started
      ch_api_dev_nginx_certs:
        condition: service_completed_successfully
    image: ch_api_dev_nginx_image
    ports:
      - '8080:8080'
      - '8443:8443'
    restart: 'always'
    networks:
      - network
    volumes:
      - nginx_certs:/etc/nginx/nginx_certs

  ch_api_dev_nginx_certs:
    build:
      context: ../..
      dockerfile: ./docker/development/nginx_server_certs/Dockerfile
    container_name: ch_api_dev_nginx_certs
    env_file:
      - .env
    image: ch_api_dev_nginx_certs_image
    networks:
      - network
    volumes:
      - nginx_certs:/home/nginx_certs/files

  ch_api_dev_node:
    build:
      context: ../..
      dockerfile: ./docker/development/node_server/Dockerfile
    container_name: ch_api_dev_node
    depends_on:
      ch_api_dev_redis:
        condition: service_healthy
      ch_api_dev_postgres_seeds:
        condition: service_completed_successfully
    env_file:
      - .env
    image: ch_api_dev_node_image
    networks:
      - network
    restart: 'always'
    ports:
      - '34273:34273'
    volumes:
      - node_src:/home/node
      - node_modules:/home/node/node_modules
      - postgres_certs:/certs/postgres
      - redis_certs:/certs/redis

  ch_api_dev_postgres:
    build:
      context: ../..
      dockerfile: ./docker/development/postgres_server/Dockerfile
    container_name: ch_api_dev_postgres
    depends_on:
      ch_api_dev_postgres_certs:
        condition: service_completed_successfully
    env_file:
      - .env
    healthcheck:
      test:
        [
          'CMD-SHELL',
          "pg_isready -d 'sslmode=verify-full sslrootcert=/certs/root.crt sslcert=/certs/psql.crt sslkey=/certs/psql.key host=ch_api_dev_postgres user=ch_api_user port=47293 dbname=ch_api_db'",
        ]
      interval: 5s
      timeout: 5s
      retries: 3
      start_period: 10s
    image: ch_api_dev_postgres_image
    networks:
      - network
    ports:
      - '47293:47293'
    restart: 'always'
    volumes:
      - postgres_certs:/certs
      - postgres_data:/var/lib/postgresql/data

  ch_api_dev_postgres_certs:
    build:
      context: ../..
      dockerfile: ./docker/development/postgres_server_certs/Dockerfile
    container_name: ch_api_dev_postgres_certs
    env_file:
      - .env
    image: ch_api_dev_postgres_certs_image
    networks:
      - network
    volumes:
      - postgres_certs:/home/postgres_certs/files

  ch_api_dev_postgres_seeds:
    build:
      context: ../..
      dockerfile: ./docker/development/postgres_seeds/Dockerfile
    container_name: ch_api_dev_postgres_seeds
    depends_on:
      ch_api_dev_postgres:
        condition: service_healthy
    env_file:
      - .env
    image: ch_api_dev_postgres_seeds_image
    networks:
      - network
    volumes:
      - postgres_seeds_src:/home/node
      - postgres_seeds_node_modules:/home/node/node_modules
      - postgres_certs:/certs/postgres
      - redis_certs:/certs/redis

  ch_api_dev_redis:
    build:
      context: ../..
      dockerfile: ./docker/development/redis_server/Dockerfile
    container_name: ch_api_dev_redis
    depends_on:
      ch_api_dev_redis_certs:
        condition: service_completed_successfully
    env_file:
      - .env
    healthcheck:
      test:
        [
          'CMD-SHELL',
          'redis-cli --tls --cert /etc/ssl/certs/client.crt --key /etc/ssl/certs/client.key --cacert /etc/ssl/certs/ca.crt -p 41729 -a $REDIS_PASSWORD ping | grep PONG',
        ]
      interval: 5s
      timeout: 5s
      retries: 3
      start_period: 10s
    image: ch_api_dev_redis_image
    networks:
      - network
    ports:
      - '41729:41729'
    restart: 'always'
    volumes:
      - redis_data:/data
      - redis_certs:/etc/ssl/certs

  ch_api_dev_redis_certs:
    build:
      context: ../..
      dockerfile: ./docker/development/redis_server_certs/Dockerfile
    container_name: ch_api_dev_redis_certs
    env_file:
      - .env
    image: ch_api_dev_redis_certs_image
    networks:
      - network
    volumes:
      - redis_certs:/home/redis_certs/files

networks:
  network:
    external: true

volumes:
  nginx_certs:
    driver: local
  node_modules:
    driver: local
  node_src:
    driver_opts:
      type: none
      device: /Users/vr/Desktop/code/ch/api/
      o: bind
  postgres_certs:
    driver: local
  postgres_data:
    driver: local
  postgres_seeds_node_modules:
    driver: local
  postgres_seeds_src:
    driver_opts:
      type: none
      device: /Users/vr/Desktop/code/ch/api/
      o: bind
  redis_certs:
    driver: local
  redis_data:
    driver: local

Backend Nginx container configuration file for the node.js server

pid                  /tmp/nginx.pid;
worker_processes     auto;
worker_rlimit_nofile 65535;

# Load modules
include              /etc/nginx/modules-enabled/*.conf;

events {
    multi_accept       on;
    worker_connections 65535;
}

http {
    charset                utf-8;
    sendfile               on;
    tcp_nopush             on;
    tcp_nodelay            on;
    server_tokens          off;
    types_hash_max_size    2048;
    types_hash_bucket_size 64;
    client_max_body_size   16M;

    # MIME
    include                mime.types;
    default_type           application/octet-stream;

    # Logging
    access_log             off;
    error_log              /var/log/nginx/error.log error;

    # Limits
    limit_req_log_level    warn;
    limit_req_zone         $binary_remote_addr zone=login:10m rate=10r/m;

    # SSL
    ssl_session_timeout    1d;
    ssl_session_cache      shared:SSL:10m;
    ssl_session_tickets    off;

    # Diffie-Hellman parameter for DHE ciphersuites
    ssl_dhparam            /etc/nginx/nginx_certs/dhparam.pem;

    # Mozilla Intermediate configuration
    ssl_protocols          TLSv1.2 TLSv1.3;
    ssl_ciphers            ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:DHE-RSA-AES128-GCM-SHA256:DHE-RSA-AES256-GCM-SHA384;

    # OCSP Stapling
    ssl_stapling           on;
    ssl_stapling_verify    on;
    resolver               1.1.1.1 1.0.0.1 [2606:4700:4700::1111] [2606:4700:4700::1001] 8.8.8.8 8.8.4.4 [2001:4860:4860::8888] [2001:4860:4860::8844] 208.67.222.222 208.67.220.220 [2620:119:35::35] [2620:119:53::53] valid=60s;
    resolver_timeout       2s;

    # Connection header for WebSocket reverse proxy
    map $http_upgrade $connection_upgrade {
        default upgrade;
        ""      close;
    }

    map $remote_addr $proxy_forwarded_elem {

        # IPv4 addresses can be sent as-is
        ~^[0-9.]+$        "for=$remote_addr";

        # IPv6 addresses need to be bracketed and quoted
        ~^[0-9A-Fa-f:.]+$ "for="[$remote_addr]"";

        # Unix domain socket names cannot be represented in RFC 7239 syntax
        default           "for=unknown";
    }

    map $http_forwarded $proxy_add_forwarded {

        # If the incoming Forwarded header is syntactically valid, append to it
        "~^(,[ \t]*)*([!#$%&'*+.^_`|~0-9A-Za-z-]+=([!#$%&'*+.^_`|~0-9A-Za-z-]+|"([\t \x21\x23-\x5B\x5D-\x7E\x80-\xFF]|\\[\t \x21-\x7E\x80-\xFF])*"))?(;([!#$%&'*+.^_`|~0-9A-Za-z-]+=([!#$%&'*+.^_`|~0-9A-Za-z-]+|"([\t \x21\x23-\x5B\x5D-\x7E\x80-\xFF]|\\[\t \x21-\x7E\x80-\xFF])*"))?)*([ \t]*,([ \t]*([!#$%&'*+.^_`|~0-9A-Za-z-]+=([!#$%&'*+.^_`|~0-9A-Za-z-]+|"([\t \x21\x23-\x5B\x5D-\x7E\x80-\xFF]|\\[\t \x21-\x7E\x80-\xFF])*"))?(;([!#$%&'*+.^_`|~0-9A-Za-z-]+=([!#$%&'*+.^_`|~0-9A-Za-z-]+|"([\t \x21\x23-\x5B\x5D-\x7E\x80-\xFF]|\\[\t \x21-\x7E\x80-\xFF])*"))?)*)?)*$" "$http_forwarded, $proxy_forwarded_elem";

        # Otherwise, replace it
        default "$proxy_forwarded_elem";
    }

    # Load configs
    include /etc/nginx/conf.d/*.conf;
}

# configuration file /etc/nginx/mime.types:

types {
    text/html                                        html htm shtml;
    text/css                                         css;
    text/xml                                         xml;
    image/gif                                        gif;
    image/jpeg                                       jpeg jpg;
    application/javascript                           js;
    application/atom+xml                             atom;
    application/rss+xml                              rss;
}

# configuration file /etc/nginx/conf.d/api.example.local.conf:
server {
    listen              8443 ssl http2;
    listen              [::]:8443 ssl http2;
    server_name         www.api.example.local;

    # SSL
    ssl_certificate     /etc/nginx/nginx_certs/nginx-self-signed.crt;
    ssl_certificate_key /etc/nginx/nginx_certs/nginx-self-signed.key;

    # security
    include             nginxconfig.io/security.conf;

    # logging
    error_log           /var/log/nginx/error.log error;

    # reverse proxy
    location / {
        proxy_pass            http://ch_api_dev_node:34273/;
        proxy_set_header Host $host;
        include               nginxconfig.io/proxy.conf;
    }

    # additional config
    include nginxconfig.io/general.conf;
}

# non-www, subdomains redirect
server {
    listen              8443 ssl http2;
    listen              [::]:8443 ssl http2;
    server_name         .api.example.local;

    # SSL
    ssl_certificate     /etc/nginx/nginx_certs/nginx-self-signed.crt;
    ssl_certificate_key /etc/nginx/nginx_certs/nginx-self-signed.key;

    # logging
    error_log           /var/log/nginx/error.log error;
    return              301 https://www.api.example.local$request_uri;
}

# HTTP redirect
server {
    listen      8080;
    listen      [::]:8080;
    server_name .api.example.local;

    # logging
    error_log   /var/log/nginx/error.log error;
    return      301 https://www.api.example.local$request_uri;
}

# configuration file /etc/nginx/nginxconfig.io/security.conf:
# security headers
add_header X-XSS-Protection          "1; mode=block" always;
add_header X-Content-Type-Options    "nosniff" always;
add_header Referrer-Policy           "no-referrer-when-downgrade" always;
add_header Content-Security-Policy   "default-src 'self' http: https: ws: wss: data: blob: 'unsafe-inline'; frame-ancestors 'self';" always;
add_header Permissions-Policy        "interest-cohort=()" always;
add_header Strict-Transport-Security "max-age=31536000; includeSubDomains; preload" always;

# . files
location ~ /.(?!well-known) {
    deny all;
}

# security.txt
location /security.txt {
    return 301 /.well-known/security.txt;
}

location = /.well-known/security.txt {
    alias ~/security.txt;
}

# configuration file /etc/nginx/nginxconfig.io/proxy.conf:
proxy_http_version                 1.1;
proxy_cache_bypass                 $http_upgrade;

# Proxy SSL
proxy_ssl_server_name              on;

# Proxy headers
proxy_set_header Upgrade           $http_upgrade;
proxy_set_header Connection        $connection_upgrade;
proxy_set_header X-Real-IP         $remote_addr;
proxy_set_header Forwarded         $proxy_add_forwarded;
proxy_set_header X-Forwarded-For   $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header X-Forwarded-Host  $host;
proxy_set_header X-Forwarded-Port  $server_port;

# Proxy timeouts
proxy_connect_timeout              60s;
proxy_send_timeout                 60s;
proxy_read_timeout                 60s;

# configuration file /etc/nginx/nginxconfig.io/general.conf:
# favicon.ico
location = /favicon.ico {
    log_not_found off;
}

# robots.txt
location = /robots.txt {
    log_not_found off;
}

# gzip
gzip            on;
gzip_vary       on;
gzip_proxied    any;
gzip_comp_level 6;
gzip_types      text/plain text/css text/xml application/json application/javascript application/rss+xml application/atom+xml image/svg+xml;

# configuration file /etc/nginx/conf.d/default.conf:
server {
    listen       8080;
    server_name  localhost;

    #access_log  /var/log/nginx/host.access.log  main;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }

    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }

    # proxy the PHP scripts to Apache listening on 127.0.0.1:80
    #
    #location ~ .php$ {
    #    proxy_pass   http://127.0.0.1;
    #}

    # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
    #
    #location ~ .php$ {
    #    root           html;
    #    fastcgi_pass   127.0.0.1:9000;
    #    fastcgi_index  index.php;
    #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
    #    include        fastcgi_params;
    #}

    # deny access to .htaccess files, if Apache's document root
    # concurs with nginx's one
    #
    #location ~ /.ht {
    #    deny  all;
    #}
}

Keep in mind that both nginx containers are separate and are using different self generated certificates

On localhost my /etc/hosts file has this line inside

127.0.0.1       localhost api.example.local www.api.example.local example.local www.example.local

When I open my backend URL at https://www.api.example.local:8443/api/v1/… endpoint, it works perfectly in the browser and I am able to retrieve JSON data

When I open my frontend URL at https://example.local the page loads but has a 500 error on it. Any API request does not go through and has a CORS Failed Error
as shown here

I did add a CORS middleware on my express server

import { NODE_ENV } from 'common/constants';

export function getAllowedOrigins() {
  // https://github.com/expressjs/cors/issues/272#issuecomment-1186236472
  let allowedOrigins: string[] = [];
  if (NODE_ENV === 'development') {
    // will not work on development when run from docker development
    allowedOrigins = [
      'http://localhost:3000',
      'https://example.local',
      'https://api.example.local:8443',
    ];
  } else if (NODE_ENV === 'test') {
    allowedOrigins = ['http://localhost:3000'];
  } else if (NODE_ENV === 'production') {
    // will not work on production when run from localhost because we don't include localhost:3000
    allowedOrigins = ['https://www.somewebsite.com', 'https://somewebsite.com'];
  }
  return allowedOrigins;
}

3 questions

  1. what URL do I need to add to make this CORS error go away
  2. My axios baseURL in nuxt.js server takes values from some environment variables

nuxt.config.js

...
export default {
  axios: {
    baseURL: `${process.env.BACKEND_PROTOCOL}://${process.env.BACKEND_HOST}:${process.env.BACKEND_PORT}`,
    credentials: true,
  },
}
...

What values should I put for BACKEND_PROTOCOL, BACKEND_HOST and BAKCNED_PORT here?

  1. If I have a websocket connection in my backend to push data, what should the URL again be because I am unable to connect currently
  • docker
  • express
  • nginx
  • docker-compose
  • nuxt.js

Trang chủ Giới thiệu Sinh nhật bé trai Sinh nhật bé gái Tổ chức sự kiện Biểu diễn giải trí Dịch vụ khác Trang trí tiệc cưới Tổ chức khai trương Tư vấn dịch vụ Thư viện ảnh Tin tức - sự kiện Liên hệ Chú hề sinh nhật Trang trí YEAR END PARTY công ty Trang trí tất niên cuối năm Trang trí tất niên xu hướng mới nhất Trang trí sinh nhật bé trai Hải Đăng Trang trí sinh nhật bé Khánh Vân Trang trí sinh nhật Bích Ngân Trang trí sinh nhật bé Thanh Trang Thuê ông già Noel phát quà Biểu diễn xiếc khỉ Xiếc quay đĩa Dịch vụ tổ chức sự kiện 5 sao Thông tin về chúng tôi Dịch vụ sinh nhật bé trai Dịch vụ sinh nhật bé gái Sự kiện trọn gói Các tiết mục giải trí Dịch vụ bổ trợ Tiệc cưới sang trọng Dịch vụ khai trương Tư vấn tổ chức sự kiện Hình ảnh sự kiện Cập nhật tin tức Liên hệ ngay Thuê chú hề chuyên nghiệp Tiệc tất niên cho công ty Trang trí tiệc cuối năm Tiệc tất niên độc đáo Sinh nhật bé Hải Đăng Sinh nhật đáng yêu bé Khánh Vân Sinh nhật sang trọng Bích Ngân Tiệc sinh nhật bé Thanh Trang Dịch vụ ông già Noel Xiếc thú vui nhộn Biểu diễn xiếc quay đĩa Dịch vụ tổ chức tiệc uy tín Khám phá dịch vụ của chúng tôi Tiệc sinh nhật cho bé trai Trang trí tiệc cho bé gái Gói sự kiện chuyên nghiệp Chương trình giải trí hấp dẫn Dịch vụ hỗ trợ sự kiện Trang trí tiệc cưới đẹp Khởi đầu thành công với khai trương Chuyên gia tư vấn sự kiện Xem ảnh các sự kiện đẹp Tin mới về sự kiện Kết nối với đội ngũ chuyên gia Chú hề vui nhộn cho tiệc sinh nhật Ý tưởng tiệc cuối năm Tất niên độc đáo Trang trí tiệc hiện đại Tổ chức sinh nhật cho Hải Đăng Sinh nhật độc quyền Khánh Vân Phong cách tiệc Bích Ngân Trang trí tiệc bé Thanh Trang Thuê dịch vụ ông già Noel chuyên nghiệp Xem xiếc khỉ đặc sắc Xiếc quay đĩa thú vị

Filed under: Kiến thức lập trình - @ 22:34

Thẻ:

Trang chủ Giới thiệu Sinh nhật bé trai Sinh nhật bé gái Tổ chức sự kiện Biểu diễn giải trí Dịch vụ khác Trang trí tiệc cưới Tổ chức khai trương Tư vấn dịch vụ Thư viện ảnh Tin tức - sự kiện Liên hệ Chú hề sinh nhật Trang trí YEAR END PARTY công ty Trang trí tất niên cuối năm Trang trí tất niên xu hướng mới nhất Trang trí sinh nhật bé trai Hải Đăng Trang trí sinh nhật bé Khánh Vân Trang trí sinh nhật Bích Ngân Trang trí sinh nhật bé Thanh Trang Thuê ông già Noel phát quà Biểu diễn xiếc khỉ Xiếc quay đĩa
Thiết kế website Thiết kế website Thiết kế website Cách kháng tài khoản quảng cáo Mua bán Fanpage Facebook Dịch vụ SEO Tổ chức sinh nhật