URL with trailing slash from AngularJs/ui-router to nginx accesses incorrect resource

Question

I have an AngularJs app (with routing by ui-router ) being served by nginx .

I'm not sure exactly who/what the culprit is, but when I refresh my browser with a URL with a trailing slash , it looks like the latter part of the URL is treated as a subdirectory , and static resources ( img / css / js / etc) are then requested from a location prefixed with this subdirectory (which doesn't exist)

Example:

• rereshing www.site.com/login will require logo.png , which will be requested from www.site.com/images/logo.png

• rereshing www.site.com/login/ (trailing slash) will require logo.png , which will be requested from www.site.com/ login /images/logo.png

I need to somehow prevent this login/ as being treated as a subdirectory.

nginx config:

Since angular does its own routing, in my nginx config I have an api route for the REST api, and a fallback route for all other URIs, which serves index.html for all unknown resources.

I have added config to strip trailing slashes from URIs.

# 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;
}

Whenever I try to refresh a route with a trailing slash, it looks as if something (Angular/nginx/browser?) treats the URI as a directory, and prefixes that directory onto all the GET requests for static resources, which breaks.

Here are excerpts from my nginx log:

Works: refresh an angular route with no trailing slash

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"

Doesn't Work: refresh an angular route with a trailing slash

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

I'm not sure if the Referer header is a red-herring?

Question

How can I configure angular and/or ui-router and/or ngingx (or whoever the culprit is) so that refreshing routes with trailing slashes works?

Answer 1

通过将基础设置为root可以解决此问题

    <base href="/">