CORS & Traefik in TrueNas Scale with TrueCharts

I've been building a homelab in my free time over recent months (alongside improving my smart home and building the next itteration of this blog). This Homelab runs TrueNas Scale and, as is recomended by anyone who uses TrueNas Scale, I use the TrueCharts Catalogue for apps as they are more flexible and updated more frequently. When working with TrueCharts, you likely want a reverse proxy to add SSL to any applications you have that might need to be web accessible. To do this TrueCharts officially recomends the Traefik app.

Unfortunately, by default Traefik blocks CORS requests and looking this issue up on google is mostly unhelpful as the official solution is to add some really simple code to the Traefik configs...which Traefik on TrueCharts doesn't expose. I will however include that fix here, for anyone who stumbled across my blog post when looking up the issue who isn't using TrueNas or TrueCharts.

For Docker Users, add the following to your Docker Config:

For Kubernetes users, the following config should be used instead.

This isn't a tutorial on setting up TrueNas Scale, TrueCharts or even Traefik. It's simply an article showing this same fix for those of us who are unfortunate enough to be using a UI to configure Traefik and who have been struglling to find anyone explaining the fix for our setup. If you access the Traefik web interface, and click over to the http middlewares page, you will find the following pre-created middleware which is key to resolving this issue. Annoyningly, this was until recently not exposed as usable on apps.

I say until recently, because after a lot of back and forth on discord and having personally opened PRs on multiple github repositories (Yay OpenSource!) I got a new checkbox added to TrueCharts that allows you to use this middleware by checking a single checkbox. All you have to do is edit your app in TrueNas, Scroll down to "Ingress" and open the advanced settings. There you will find a lovely little checkbox labled "Allow Cross Origin Requests" added by yours truely.

Once you check that, TrueCharts will redeploy your app, and you should no longer have CORS issues.