1

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?

Steve Lorimer
  • 27,059
  • 17
  • 118
  • 213
  • 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 http://stackoverflow.com/questions/11095179/using-html5-pushstate-on-angular-js – Ivar Feb 18 '14 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 Feb 18 '14 at 23:19

1 Answers1

1

This was fixed by setting the base to root

    <base href="/">
Steve Lorimer
  • 27,059
  • 17
  • 118
  • 213
  • 2
    for future reference: http://stackoverflow.com/questions/17768814/angularjs-routing-set-base-url-for-all-routes – Ivar Feb 18 '14 at 23:32