Nginx代理HTTPS Wildfly遇MIME类型拦截，UI无法加载求助

核心问题 #

你遇到的HTTPS访问报错，根源是Nginx无法正确处理静态资源请求：

• 你在HTTPS server块里配置了root /opt/wildfly/standalone/deployments/planyourplaylist.war，但war是压缩包，Nginx不能直接读取里面的文件。请求JS/CSS等资源时，Nginx找不到文件，返回的是HTML格式的404错误页，浏览器识别其MIME类型为text/html，不符合JS资源的要求，因此拦截加载。
• ServiceWorker安装失败是连锁反应——依赖的vaadin-bundle.js加载失败，导致sw.js无法正常初始化。

修复方案 #

方案1：让Nginx转发静态资源请求到Wildfly（推荐）

直接把静态资源请求转发给Wildfly处理，避免Nginx读取war包的问题。修改HTTPS server块中的静态资源location：

server {
  listen 443 ssl ;
  server_name www.planyourplaylist.com; # 改为你的域名，而非IP
  ssl_certificate ssl_cert/planyourplaylist_cert.cer;
  ssl_certificate_key ssl_cert/planyourplaylist_private.key;
  ssl_protocols       TLSv1.2 TLSv1.3; # 建议只保留安全的协议版本
  ssl_ciphers         HIGH:!aNULL:!MD5;

  location / {
        proxy_set_header X-Forwarded-Host $host;
        proxy_set_header X-Forwarded-Server $host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_pass https://<ip-adress>:8443/;
  }

  # 修改静态资源处理逻辑，转发到Wildfly
  location ~ \.(css|js|png|gif|jpeg|jpg|swf|ico|woff)$ {
        proxy_set_header X-Forwarded-Host $host;
        proxy_set_header X-Forwarded-Server $host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_pass https://<ip-adress>:8443;
        expires 360d;
    }
}

同时，把HTTP server块改为强制重定向到HTTPS域名：

server {
    listen 80;
    server_name www.planyourplaylist.com <ip-adress>;
    return 301 https://www.planyourplaylist.com$request_uri;
}

方案2：Nginx直接提供静态资源（需解压war包）

如果想让Nginx直接托管静态资源，先把war包解压到本地目录：

unzip /opt/wildfly/standalone/deployments/planyourplaylist.war -d /opt/wildfly/standalone/deployments/planyourplaylist_static

然后修改静态资源location的root路径为解压后的目录：

location ~ \.(css|js|png|gif|jpeg|jpg|swf|ico|woff)$ {
        root /opt/wildfly/standalone/deployments/planyourplaylist_static;
        expires 360d;
    }

注意：这种方式需要在war包更新时重新解压，维护成本更高。

最后操作 #

修改配置后，重启Nginx生效：

sudo nginx -s reload

内容的提问来源于stack exchange，提问作者Zakon