I've been troubleshooting this for almost half a day now. :(
On the Nginx running on my laptop where I don't use proxy_pass, the try files is working great. The Javascript web app I wrote does client routing when page is loaded. However, if webpage is refreshed, it's the server that receives the request.
I have this configuration in my Nginx running on my laptop
location /viewer {
try_files $uri /viewer/index.html;
}
With the config above, if I requested http://localhost/viewer/getservice which does not exists on my file system, I will be served with /viewer/index.html. It's working great!
However, we have a different configuration at work. All our static files/html pages are stored in an upstream S3 bucket.
This is our work configuration
location /viewer {
proxy_pass http://s3-bucket-server/viewer;
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Origin' $cors_header;
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,Keep-Alive,User-Agent,Origin,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
}
The configuration above works great when I access it like this, http://internal-app.docs.svr/viewer
. I can click on our left navigation which changes the location path on the client side to like
http://internal-app.docs.svr/viewer/settings
http://internal-app.docs.svr/viewer/docs
http://internal-app.docs.svr/viewer/permissions
etc
However, if let's say I was in http://internal-app.docs.svr/viewer/permissions
and I clicked the browser, what normally happens is that it does a GET call on /viewer/permissions on our web server internal-app.docs.svr. Unfortunately, there is no nginx location rule that will handle that.
What I'd like to achieve is that when the above scenario happens(a 404), have nginx serve /viewer/index.html. I don't want a redirect since I want to keep the last path I was at. In this case, it was /viewer/permissions
. The javascript app I wrote will handle /viewer/permissions
eventually.