使用Nginx+PHP-CGI部署时无法正确提供CSS/JS对应MIME类型文件

环境与文件结构 #

• 网站运行在Docker容器，Nginx负责转发PHP请求至PHP-FPM容器
• PHP页面挂载路径：/var/www/html/badminton/public
• SQLite数据库路径：/var/www/html/badminton/server
• 所有文件所有者为www-data，权限设置为755

文件结构：

-badminton
  -public
    -css
      -style.css
    -js
      -script.js
    -index.php
  -server
    -database
      -db

错误表现 #

PHP页面与数据库功能正常，但CSS/JS无法加载，浏览器抛出以下错误：

Refused to apply style from 'https://url/css/style.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

Refused to execute script from 'https://url/js/script.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

推测问题源于FastCGI处理了所有请求（包括静态资源），导致MIME类型被错误设置为text/html，已确认Nginx的MIME配置文件正确引入。

当前Nginx配置（/etc/nginx/conf.d/nginx.conf） #

server {
        listen 80;
        server_name localhost;

        location / {
                root /var/www/html/badminton/public;
                index index.php index.html index.htm;

                try_files $uri $uri/ =404;
        }

        location ~ \.css$ {
                root /var/www/html/badminton/public/css;
                expires 30d;
                add_header Cache-Control "public, max-age=2592000";
                try_files $uri =404;
        }

        location ~ \.js$ {
                root /var/www/html/badminton/public/js;
                expires 30d;
                add_header Cache-Control "public, max-age=2592000";
                try_files $uri =404;
        }

        # Passes PHP requests to PHP-FPM container
        location ~ \.php$ {
                root /var/www/html/badminton/public;
                try_files $uri =404;
                fastcgi_split_path_info ^(.+\.php)(/.+)$; #this line
                include fastcgi_params;
                fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
                fastcgi_pass badminton-web_php-fpm_1:9000; # Replace with your PHP-FPM container name
                fastcgi_index index.php;
        }

        location ~ /\.ht {
                deny all;
        }

        # Logs for Nginx access and errors
        access_log /var/log/nginx/access.log;
        error_log /var/log/nginx/error.log;
}

Docker相关配置 #

Nginx Dockerfile #

# Use the official NGINX image
FROM nginx:latest
# Remove default NGINX configuration
RUN rm /etc/nginx/conf.d/default.conf
# Copy your custom NGINX configuration
COPY ./nginx/nginx.conf /etc/nginx/conf.d/

# Create the web root directory
RUN mkdir -p /var/www/html/badminton
RUN mkdir -p /var/www/html/badminton/public
RUN mkdir -p /var/www/html/badminton/server

# Set proper permissions for the web server user
RUN chown -R www-data:www-data /var/www/html \
    && chmod -R 755 /var/www/html

docker-compose.yml #

version: '3.9'
services:
  # PHP-FPM Service
  php-fpm:
    build:
      context: .
      dockerfile: Dockerfile
    volumes:
      # Mounts the local 'app' directory to the container's Nginx root
      - ./badminton_team_auto/public:/var/www/html/badminton/public
      - ./badminton_team_auto/server:/var/www/html/badminton/server

  # NGINX Service
  nginx:
    build:
      context: .
      dockerfile: ./nginx/Dockerfile
    volumes:
      # Mountlocal 'app' directory to the Nginx root
      - ./badminton_team_auto/public:/var/www/html/badminton/public
      - ./badminton_team_auto/server:/var/www/html/badminton/server
    ports:
      - "8075:80"
    depends_on:
      - php-fpm  # Depends on the PHP-FPM service

已尝试的无效方案 #

• 修改HTML中CSS/JS的href路径
• 使用location /css {}替代后缀匹配的location规则
• 手动添加add_header Content-Type text/css;/add_header Content-Type application/javascript;
• 合并静态资源的location规则（如location ~* \.(css|js)$）

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