Reverse proxy pages send me to index.html instead

[tague (Ethan McTague)]

Hello! I’m testing out Caddy for a simple server that consists of 2 parts: a single-page static application, and the API that powers it. Therefore, I want my server to do the following:

• Route requests at /api through to the other server.
• Send any real files (e.g. app.js) through.
• Send index.html at any other requested path.

My current Caddyfile looks like this:

example.com

root /var/www
index index.html
proxy /api http://localhost:5000 {
        without /api
        transparent
}
gzip
tls foo@example.com

It serves up my static files just fine, but for some reason, when I visit example.com/api, it still serves up index.html instead of my API.

Edit:

If I change the API proxy path to /, I’ve found that requests made through XMLHttpRequest or cURL will end up recieving responses fro the API, while requests made through my browser will receive the static web app’s pages instead. This makes the app work, but it is still not ideal as my API serves up a few endpoints which would be useful for users (e.g. auto-generated API documentation), and certain requests (e.g. for a certain JS file) are being sent to the API server when they shouldn’t be.

[Whitestrake (Matthew Fay)]

Hi @tague, welcome to the Caddy community.

@tague

If I change the API proxy path to /, I’ve found that requests made through XMLHttpRequest or cURL will end up recieving responses fro the API, while requests made through my browser will receive the static web app’s pages instead.

I’d be looking into possible caching in your browser in that case - Caddy doesn’t make decisions about what to serve based on the client’s user agent, at least not with that Caddyfile. curl doesn’t cache and it doesn’t lie, I’d always trust it over a browser.

That said, for your requirements, I’d probably do some rewriting.

example.com {
	tls foo@example.com
	root /var/www
	gzip

	rewrite /api {
		to {path} /upstream
	}
	proxy /upstream localhost:5000 {
		without /upstream
		transparent
	}
}

This approach has the benefit of prioritising existing files over proxying, so if you had some file called api.js for example, and someone requested it, they’ll get the file on disk instead of being sent upstream. Change /upstream to any path you’re not expecting a client to actually request.

(I didn’t include index index.html because that’s already a default.)