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?

I do assume you are using push state in angular and this is why you get real paths like /bla/login/page instead of /#/bla/login/page so in this case easiest fix is not to use the push state as it requires server config to work for every path. More info stackoverflow.com/questions/11095179/… — Ivar
– Ivar, Commented Feb 18, 2014 at 23:14
@ivarPrudnikov - thanks for the comment, and you are correct - but that is why I have the try_files serving /index.html - so that if the resource pointed to by $uri doesn't exist, it will fall back to serving /index.html... this is not the cause of my problem — Steve Lorimer
– Steve Lorimer, Commented Feb 18, 2014 at 23:19

Steve Lorimer · Accepted Answer · 2014-02-18 23:23:29Z

1

This was fixed by setting the base to root

    <base href="/">

answered Feb 18, 2014 at 23:23

Steve Lorimer

29k22 gold badges135 silver badges240 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ivar Over a year ago

for future reference: stackoverflow.com/questions/17768814/…

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related