Reload Vue pages; hide example.com/api

Help
1

1. Caddy version (caddy version): v2.4.5

2. How I run Caddy:

a. System environment:

Ubuntu 18.04, on VPS

b. Command:

systemctl enable caddy #so it runs on startup

c. Service/unit/compose file:

Not applicable, I think

d. My complete Caddyfile or JSON config:

example.com {
        root * /var/www/html/

        reverse_proxy /api* localhost:4000

        file_server
}

3. The problem I’m having:

I’m using mongoDB, with Vue, axios. I followed this tutorial: MEVN App Full Deployment Walkthrough! - [MongoDB, Express, Vue, Node.js] - YouTube

It seems my entire database is visible in JSON at example.com/api. I want to hide this from public view.

I also want to enable reloading on Vue, when not in the root directory. E.g. reloading example.com/example results in a 404 error by default. Vue documentation says to add try_files {path} / to the Caddyfile, but this then breaks the api and the database.

So in short: I want to enable reloading Vue pages, and hide the example.com/api from public view.

4. Error messages and/or full log output:

5. What I already tried:

See part 3 – try_files {path} / allows for reloading Vue pages, but then the database doesn’t work – presumably because it’s trying to access example.com/api via axios but this ‘loads’ that page instead of accessing properly?

6. Links to relevant resources:

2

In this case, you’ll want to use handle blocks to make mutually exclusive routes, so that try_files doesn’t step over /api* routes.

example.com {
	handle /api* {
		reverse_proxy localhost:4000
	}

	handle {
		root * /var/www/html
		try_files {path} /index.html
		file_server
	}
}

But I’m not sure what you mean by “hide /api from public view”, because it has to be publicly accessible for your frontend Vue code to make requests to it.

You need to make sure your API is authenticated, so that users who aren’t logged in cannot fetch any information they shouldn’t see.

1 Like
3

Perfect, thank you very much @francislavoie. That’s solved the reloading problem.

Regarding the /api, I mean that if I go to example.com/api, my entire mongoDB database is displayed in JSON format. For example, the first line could be:

[{"_id":"6168115af6bfc986c18f821d","name":"test","age":"20","__v":0},
4

You should never directly expose your database.

Do you have a NodeJS backend app? You should be reverse_proxying to your NodeJS app, not to your database.

Your NodeJS app should be accessing your database, adding an authentication layer so that only logged-in users can see relevant data.

At this point, this isn’t a Caddy issue.

5

Yep, it’s running with Node.js. I’m quite confused really, I thought the reverse_proxy in Caddy was doing that, Node is on port 4000 which is what my Caddy setting is.

6

Okay, in that case, it’s up to your Node app to not return data that you shouldn’t have public, unless the user is authenticated.

Nothing else to do in Caddy at this point, your config is correct as-is.

7

This topic was automatically closed after 30 days. New replies are no longer allowed.