Nginx按语言代码路由不同路径时跳转后出现404问题求助

你的Nginx配置中，location ~ ^/en 和 location ~ ^/es 使用了root指令，导致路径拼接错误。比如访问/en时，Nginx会尝试查找/var/www/html/en-US/en/index.html，但你的英文版本文件实际存放在/var/www/html/en-US/index.html，多出来的/en层级导致文件找不到，返回404。

以下两种方案任选其一即可解决问题：

方案一：用alias替换root #

alias会直接将location匹配的路径部分替换为指定目录，不会额外拼接URI，完美适配你“访问路径名≠实际目录名”的场景：

location ~ ^/en {
    alias             /var/www/html/en-US;
    index            index.html;
    # 适配Angular单页应用路由，刷新前端路由时返回对应语言的入口文件
    try_files        $uri $uri/ /en/index.html;
}

location ~ ^/es {
    alias             /var/www/html/es;
    index            index.html;
    try_files        $uri $uri/ /es/index.html;
}

方案二：优化map与重定向规则（更符合Nginx最佳实践） #

原配置中的if判断可以用map的default参数替代，同时补充HTTPS的核心配置（你原配置遗漏了这部分）：

map $http_accept_language $accept_language {
    default en;
    ~*^es es;
    ~*^en en;
}

server {
    server_name example.com;
    listen 443 ssl;
    # 补充你的SSL证书路径
    ssl_certificate /path/to/your/cert.crt;
    ssl_certificate_key /path/to/your/private.key;

    # 根路径重定向到浏览器偏好语言
    rewrite ^/$ /$accept_language/ permanent;

    location ~ ^/en {
        alias /var/www/html/en-US;
        index index.html;
        try_files $uri $uri/ /en/index.html;
    }

    location ~ ^/es {
        alias /var/www/html/es;
        index index.html;
        try_files $uri $uri/ /es/index.html;
    }
}

如果你的Angular应用有自定义前端路由，必须保留try_files的最后一项（如/en/index.html），否则刷新路由页面时会再次出现404。

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