添加GET请求if语句后Nginx Angular SPA子路由直访404求助

问题根源：Nginx if 指令与 try_files 的兼容性冲突 #

Nginx 的 if 指令并不是常规编程语言里的条件分支逻辑，它更像是一个请求处理的“上下文修饰器”——在 location 块中使用时，会打乱原有请求的处理链，直接导致 try_files 的 fallback 逻辑失效，这就是你直接访问子路由出现404的核心原因。

具体拆解一下：

• 当你直接访问 http://<application>.com/some-page 时，这是一个 GET 请求，会命中 if ($request_method = GET) 块。
• 虽然你在 location 根目录下保留了 try_files $uri $uri/ /index.html;，但 if 块的存在会干扰 Nginx 的执行顺序：它会优先执行 if 块内的指令，而 try_files 中“找不到文件就 fallback 到 index.html”的关键逻辑无法被正确触发。
• 最终 Nginx 会直接尝试查找物理文件 /some-page，找不到就返回404，完全没机会让 Angular 的路由系统接管处理。

另外补充一个细节：add_header 默认只在响应码为 200、201、204 等“成功类”状态码时生效，如果没加 always 参数，在内部重定向场景下可能不会添加跨域头，但这不是你404的直接原因。

正确的配置方案（避开 if 处理 GET 请求） #

你根本不需要用 if 判断 GET 请求，直接在 location 块中全局添加跨域头即可，同时单独处理 OPTIONS 预检请求：

location / {
    # always 参数确保所有响应码都能带上跨域头
    add_header Access-Control-Allow-Origin "*" always;
    # 保留 SPA 路由的核心 fallback 逻辑
    try_files $uri $uri/ /index.html;

    # 单独处理 OPTIONS 预检请求
    if ($request_method = OPTIONS) {
        add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";
        add_header Access-Control-Allow-Headers "Content-Type, Authorization";
        add_header Access-Control-Max-Age 86400;
        return 204;
    }
}

这个配置既保证了 Angular SPA 的路由 fallback 正常工作，又正确添加了跨域头，完美避开了 if 指令带来的兼容性问题。

为什么注释掉 GET 的 if 就恢复正常？ #

当你注释掉 if ($request_method = GET) 块后，Nginx 回到了原本的处理流程：所有请求都会先执行 try_files，找不到物理文件时自动 fallback 到 index.html，Angular 的路由系统就能正常接管子路由的解析了。

内容的提问来源于stack exchange，提问作者Rajshri Mohan K S