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

Question

我有一个AngularJs应用（ui-router路由）由nginx提供服务。

我不确定究竟是谁/什么罪魁祸首，但当我刷新我的浏览器时带有斜杠的网址时，它看起来像后者将URL视为子目录，然后从前缀位置请求静态资源（img / css / js / etc）使用此子目录（不存在）

示例：

• 重新取消www.site.com/login将需要logo.png，这将从www.site.com/images/logo.png

请求

• 重新抓取www.site.com/login/ （尾随斜线）将需要logo.png，这将从www.site.com/ login <请求/强> /images/logo.png

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

nginx config：

由于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日志摘录：

工作：刷新没有斜线的角度路线

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"

不起作用：使用尾部斜线刷新角度路线

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标题是否是红鲱鱼？

问题

如何配置angular和/或ui-router和/或ngingx（或罪魁祸首），以便使用尾随斜杠刷新路线？

Answer 1

通过将基数设置为root

来解决此问题

    <base href="/">