angularjs - 从 AngularJs/ui-router 到 nginx 的带有尾部斜杠的 URL 访问不正确的资源

Question

我有一个 AngularJs 应用程序(通过 ui-router 进行路由)由 nginx 提供服务。

我不确定罪魁祸首究竟是谁/什么，但是当我用一个带有尾部斜线的网址刷新我的浏览器时，它看起来像是后半部分URL 的一部分被视为一个子目录，静态资源(img/css/js/等)是然后从一个前缀为这个子目录(不存在)的位置请求

示例:

• 重新刷新 www.site.com/login 将需要 logo.png，这将从 www.site.com/images/请求logo.png

• rereshing www.site.com/login/ (trailing slash) 将需要 logo.png，这将被请求来自 www.site.com/login/images/logo.png

我需要以某种方式防止此 login/ 被视为子目录。

nginx 配置:

由于 Angular 有自己的路由，在我的 nginx 配置中，我有一个用于 REST api 的 api 路由，以及一个用于所有其他 URI，为所有未知资源提供 index.html。

我已添加配置以从 URI 中去除尾部斜杠。

# api route
location ~* /api.? {
    ...
}

# fallback route
location ~* .? {
    # strip any trailing slash
    rewrite ^/(.*)/$ /$1 break;

    root /var/www/site/app;
    index index.html;

    # serve index.html if uri doesn't exist
    try_files $uri $uri/ /index.html =404;
}

每当我尝试用尾部斜杠刷新路由时，它看起来好像有什么东西(Angular/nginx/browser？)将 URI 视为一个目录，并且将该目录作为前缀到所有 GET请求静态资源，中断。

以下是我的 nginx 日志的摘录:

有效:刷新没有尾部斜杠的 Angular 路径

http://localhost/login

[debug] : http request line: "GET /login HTTP/1.1"
[debug] : http header: "Referer: http://localhost/"
[debug] : http request line: "GET /images/logo.png HTTP/1.1"

不起作用:用尾部斜杠刷新 Angular 路径

http://localhost/login/

[debug] : http request line: "GET /login/ HTTP/1.1"
[debug] : http header: "Referer: http://localhost/login/"
[debug] : http request line: "GET /login/images/logo.png HTTP/1.1" 

*error* /login/images/logo.png doesn't exist

我不确定 Referer header 是否是误导？

问题

我如何配置 angular 和/或 ui-router 和/或 ngingx(或任何罪魁祸首)以便刷新路由尾部斜杠有效吗？

Answer 1

这是通过将 base 设置为 root 来修复的

    <base href="/">