'403 Forbidden' on App Initialization when delivering Angular frontend with Spring Boot

Get Help
,
1

Techstack im using:

  • Angular 15
  • Spring Boot 3.1.4
  • Caddy 2.7.2
  • Oracle Cloud VM
  • docker compose with docker 24.0.5

The Issue

Hi,
my Angular frontend is protected by Auth0.
I’m delivering my static frontend files (dist/) inside my Spring Boot backend. Herefore I’m saving those files at ‘myApp/src/main/resources/static/’.
When starting the Spring application via gradle the frontend is loaded at the root path (e.g localhost:8080) and everything just works fine.
Same, when I start the Spring application as a container on port 8080 on my local machine.

To deploy my app I’m using a free Oracle Linux VM (for reference check ‘https://www.aclue.de/2023/07/22/deploy-and-securely-expose-your-app-on-a-free-virtual-machine/’) with a Caddy reverse proxy.
It’s configured like so:

myApp.com {
reverse_proxy localhost:8080
}

But when I start the Caddy server and run the container on the VM the Issue occures. I’m getting a white screen and some ‘403 Forbidden’ responses on the resources:

image
image1652×292 67 KB

Any help would be appreciated.

2

When i run the Angular frontend inside a NGINX container on the VM it also works fine.

NGINX Container running on port 80
Docker port mapping 4200:80
Caddy reverse proxy to 4200

3

I wrote a blog post that shows how to package your Angular and Spring Boot apps together and do all the authentication with Spring Security. I know this doesn’t solve this particular issue, but maybe it’ll help?

4

Hi,
thanks for your reply!

Unfortunately the way of packaging is not the issue here.

But still there’s some very helpful information in that article, especially the SpaWebFilter and the Cypress setup.