Below is my current nginx configuration. I have built a multi tenant website that allows users to create their own websites through our portal and their created website will be shown as pagepro.mn/p/{thier site name}. The app works fine is I proceed to pagepro.mn/p/balletschool.mn the balletschool.mn site will show. However I want to be able to access this from a different domain like balletschool.mn. So i setup another server block with the servername as it is and am trying to proxy pass it just like the default server but it isn’t working with error:

Loading module from “http://balletschool.mn/_nuxt/ucHlWe1D.js” was blocked because of a disallowed MIME type (“text/html”)

First I suspected the static _nuxt files are not being accessed because balletschool.mn/_nuxt is really pagepro.mn/p/balletschool.mn/_nuxt. However when I try to reverse proxy to just the localhost:3000 I also get the same error. If anyone has any idea on how i can solve this issue please help.

server {
    listen 80 default_server;
    server_name pagepro.mm www.pagepro.mn;

    location / {
        proxy_set_header X-Real-IP $remote_addr;
        proxy_pass http://localhost:3000;
    }

    location /api {
        proxy_set_header X-Real-IP $remote_addr;
        proxy_pass http://localhost:4004/api;
    }
}
server {
    listen 80;
    server_name balletschool.mn www.balletschool.mn;

    location / {
        proxy_set_header X-Real-IP $remote_addr;
        proxy_pass http://localhost:3000/p/balleschool.mn;
    }
}

I tried to have multiple domains reverse proxied to the same port with different paths on the port. I am trying to have custom domains pointed to the websites users create on my site creator app.