Could not load CSS and JS Correctly

[Cao_Anh]

Hi,

I have a problem; many pages cannot load its css/js correctly as image bellow

I’m using Ubuntu 24 TLS.

This is my ngix server config

server {
  listen 80;
  listen [::]:80;
  listen 443 quic;
  listen 443 ssl;
  listen [::]:443 quic;
  listen [::]:443 ssl;
  http2 on;
  http3 off;
  {{ssl_certificate_key}}
  {{ssl_certificate}}
  server_name nas.caoanh.dev;
  {{root}}

  {{nginx_access_log}}
  {{nginx_error_log}}

  if ($scheme != "https") {
    rewrite ^ https://$host$request_uri permanent;
  }

  # set max upload size and increase upload timeout:
  client_max_body_size 512M;
  client_body_timeout 300s;
  fastcgi_buffers 64 4K;

  # Enable gzip but do not remove ETag headers
  gzip on;
  gzip_vary on;
  gzip_comp_level 4;
  gzip_min_length 256;
  gzip_proxied expired no-cache no-store private no_last_modified no_etag auth;
  gzip_types application/atom+xml application/javascript application/json application/ld+json application/manifest+json application/rss+xml application/vnd.geo+json application/vnd.ms-fontobject application/wasm application/x-font-ttf application/x-web-app-manifest+json application/xhtml+xml application/xml font/opentype image/bmp image/svg+xml image/x-icon text/cache-manifest text/css text/plain text/vcard text/vnd.rim.location.xloc text/vtt text/x-component text/x-cross-domain-policy;

  # Remove X-Powered-By, which is an information leak
  fastcgi_hide_header X-Powered-By;

  add_header Permissions-Policy "geolocation=(),midi=(),sync-xhr=(),microphone=(),camera=(),magnetometer=(),gyroscope=(),fullscreen=(self),payment=()";
  add_header Strict-Transport-Security "max-age=31536000; includeSubDomains; preload;";

  location ^~ /.well-known {
    # The rules in this block are an adaptation of the rules
    # in `.htaccess` that concern `/.well-known`.
    location = /.well-known/carddav { return 301 /remote.php/dav/; }
    location = /.well-known/caldav  { return 301 /remote.php/dav/; }
    location /.well-known/acme-challenge    { try_files $uri $uri/ =404; }
    location /.well-known/pki-validation    { try_files $uri $uri/ =404; }
    # Let Nextcloud's API for `/.well-known` URIs handle all other
    # requests by passing them to the front-end controller.
    return 301 /index.php$request_uri;
  }

  # Remove "#" to enable the push service. Please note that this must be set up before activation.
  #location /push/ {
  #    proxy_pass http://localhost:7867/;
  #    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-Forwarded-For $proxy_add_x_forwarded_for;
  #}

  {{settings}}
  

  location / {
    rewrite ^ /index.php;
  }

  location ~ ^\/(?:build|tests|config|lib|3rdparty|templates|data)\/ {
    deny all;
  }

  location ~ ^\/(?:\.|autotest|occ|issue|indie|db_|console) {
    deny all;
  }

  include /etc/nginx/global_settings;

  try_files $uri $uri/ /index.php?$args;
  index index.php index.html;
  
  
  location ~ ^\/(?:index|setup-nextcloud|remote|public|cron|core\/ajax\/update|status|ocs\/v[12]|updater\/.+|oc[ms]-provider\/.+)\.php(?:$|\/) {
    include fastcgi_params;
    fastcgi_split_path_info ^(.+?\.php)(\/.*|)$;
    set $path_info $fastcgi_path_info;
    try_files $fastcgi_script_name =404;
    fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
    fastcgi_param PATH_INFO $path_info;
    fastcgi_param front_controller_active true;
    fastcgi_read_timeout 3600;
    fastcgi_send_timeout 3600;
    fastcgi_pass 127.0.0.1:{{php_fpm_port}};
    fastcgi_param PHP_VALUE "{{php_settings}}";
  }
  
  
  location ~ ^\/(?:updater|oc[ms]-provider)(?:$|\/) {
    try_files $uri/ =404;
    index index.php;
  }
  
  location ~ \.css\?v=[a-zA-Z0-9-]+$ {
    add_header Content-Type text/css;
  }
  
  types {
    text/javascript mjs;
  }

  location ~ \.(?:css|js|mjs|woff2?|svg|gif|map)$ {
    try_files $uri /index.php$request_uri;
    add_header Cache-Control "public, max-age=15778463";
    #add_header X-Content-Type-Options nosniff;
    add_header X-XSS-Protection "1; mode=block";
    add_header X-Robots-Tag none;
    add_header X-Download-Options noopen;
    add_header X-Permitted-Cross-Domain-Policies none;
    add_header Referrer-Policy no-referrer;
    # Optional: Don't log access to assets
    access_log off;
  }
  
  
  location ~ \.(?:png|html|ttf|ico|jpg|jpeg|bcmap)$ {
    try_files $uri /index.php$request_uri;
    # Optional: Don't log access to other assets
    access_log off;
  }

  if (-f $request_filename) {
    break;
  }
}

Anyone have same problem and how to fix this? Thanks

[jtr]

Please try to reproduce first using the tested/validated Nginx configuration in the Admin Manual: NGINX configuration — Nextcloud latest Administration Manual latest documentation

This will tell you whether it’s your customized Nginx configuration or not.

From a quick glance, your config has a number of out-of-date and not up-to-spec bits which are likely causing this.

[Cao_Anh]

Thanks for your advised but default setting on document page seem out of date

[Cao_Anh]

After checking a while, which need to adjust php-handler port to match on my server

upstream php-handler {
server 127.0.0.1:18001;
}

Now, everything works ok. Thank you.