I have never done this before and I’m wondering if it’s secure enough to host the backend on some server and allow a CORS header to let the Frontend generate requests?
As long as you can get it working without putting any wildcards (asterix *
) in your CORS headers, you're using CORS as intended, and should be fine.
The alternative would be to host Frontend and backend on a VPS and then route my domain that I bought on Cloudflare there, but then I’m thinking that in case my Frontend is insecure somehow the whole instance would be compromised, no?
Back in my day we almost always hosted the front end and the back end on the same host. Of course, we also did a lot of stupid shit back then.
It's not a disaster to host them the same place, but it's certainly not a best practice. It's better to get the CORS headers working, if you can. But just hosting them the same place isn't, by itself, a security issue. It enables a shit ton of other security mistakes to be cause a lot more harm. But it's not, itself, a problem.
Edit: Bonus tip. You probably know this, but lots of newbies miss it. Every piece of code and config in your front end app is optional to me and to all bad actors. So take care you don't put any important secrets or critical defensive decision logic there.