Angular SSR应用中WordPress路由返回404的Nginx配置问题

当前问题是访问example.com/discover/*下的博客文章时，Angular返回404页面，仅刷新才能加载。核心原因是Nginx对WordPress的路由转发规则存在问题，导致动态路由请求被Angular接管。以下是调整后的完整Nginx配置及关键修改说明：

调整后的Nginx配置 #

server {
        server_name  domain.com;

        # WordPress site
        location /discover {
                alias /usr/share/nginx/html/blog;
                index index.php;

                # 用try_files替代if规则，安全处理静态文件与路由转发
                try_files $uri $uri/ /discover/index.php?$args;

                location ~ \.php$ {
                        if (!-f $request_filename) { return 404; }

                        fastcgi_pass  unix:/var/run/php-fpm/www.sock;
                        include       fastcgi_params;
                        fastcgi_param SCRIPT_FILENAME $request_filename;
                        # 传递PATH_INFO适配WordPress固定链接
                        fastcgi_param PATH_INFO $fastcgi_path_info;
                }
        }

        # Website - Angular SSR Application
        location / {
                proxy_pass http://127.0.0.1:4000;
        }

        error_page 404 /404.html;
        location = /404.html {
        }

        error_page 500 502 503 504 /50x.html;
        location = /50x.html {
        }

    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/domain.com/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/domain.com/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot

}

server {
    if ($host = domain.com) {
        return 301 https://$host$request_uri;
    } # managed by Certbot

    server_name  domain.com;
    listen 80;
    return 404; # managed by Certbot
}

关键修改说明 #

• 替换if规则为try_files：Nginx官方不推荐在location中使用if (!-e $request_filename)，容易因上下文匹配问题导致路由错误。try_files会优先尝试匹配静态文件，不存在时自动转发到WordPress的index.php处理动态路由，更可靠高效。
• 添加PATH_INFO参数：确保WordPress能正确解析/discover/how-it-works这类固定链接的路径信息，适配其 permalink 结构，避免路由解析失败。
• 保留alias配置：由于WordPress根目录是/usr/share/nginx/html/blog，alias能直接将/discover开头的请求映射到该目录，不会像root那样在目录下额外追加/discover路径，保证文件路径匹配正确。

后续验证步骤 #

1. 执行nginx -t验证配置语法是否正确
2. 执行systemctl reload nginx重启Nginx使配置生效
3. 确认WordPress后台「设置-固定链接」已设置为非默认模式（如「文章名称」），且站点地址（Site Address）配置为https://domain.com/discover

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