Nginx location块返回404时CSS加载异常问题求助

核心问题 #

你当前的配置有两个关键错误：

1. CSS匹配规则写错了：location \.css是前缀匹配，只会匹配URI以.css开头的请求，但你的CSS请求是/images/somefile.css，开头是/images，这个规则根本不会触发。
2. 正则匹配优先级覆盖：location ~ /images是正则匹配，Nginx中正则匹配的优先级高于前缀匹配，而且这个规则会匹配任何包含/images的URI（包括你的CSS请求），直接返回404，导致CSS加载失败。

正确配置方案 #

下面两种方案都能实现你的需求：

方案一：通用CSS匹配（推荐）

用正则匹配所有以.css结尾的请求，并且放在/images规则前面（正则匹配按配置顺序生效，先出现的优先匹配）：

server{
    include /etc/nginx/mime.types;
    listen 18081;
    root /home/maxou;
    error_page 404 /webserv/error/404.html;

    # 优先匹配所有.css结尾的请求，指定CSS文件所在的root
    location ~* \.css$ {
        root /home/maxou/webserv/error;
    }

    # 匹配以/images开头的请求（排除已被CSS规则匹配的请求）
    location ~ ^/images {
        return 404;
    }
}

• ~* \.css$：不区分大小写的正则，匹配所有以.css结尾的URI，确保CSS请求不会被/images规则拦截。
• ~ ^/images：精确匹配以/images开头的URI（避免匹配到路径中间包含/images的其他请求）。

方案二：指定单个CSS文件（适合固定文件名场景）

如果你的CSS文件名固定，可以用前缀匹配加^~修饰符，让它的优先级高于正则匹配：

server{
    include /etc/nginx/mime.types;
    listen 18081;
    root /home/maxou;
    error_page 404 /webserv/error/404.html;

    # 用^~提升前缀匹配优先级，直接指定CSS的请求路径
    location ^~ /images/somefile.css {
        root /home/maxou/webserv/error;
    }

    location ~ ^/images {
        return 404;
    }
}

额外说明 #

• 你的error_page配置是正确的，/webserv/error/404.html对应的物理路径是/home/maxou/webserv/error/404.html，能正常访问。
• Nginx location匹配优先级顺序：^~前缀匹配 > 正则匹配（_、*） > 普通前缀匹配 > 通用匹配（/）。

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