Enabling CORS for VueJS devserver

Question

My setup is the following:

• Custom DNS server pointing a custom TLD to localhost
• nginx as a reverse proxy
• golang backend
• VueJS front-end through vue-cli

What I want is to have both my api and my frontend on sub.domain.tld where /api is reverse-proxying to my API and everything else to go to my vuejs dev server.

The current nginx config I have is working for my need but it prevents the vue devserver to connect:

server {
        listen      80;
        server_name sub.domain.tld;
        return 301 https://$server_name$request_uri;
}

server {
        listen 443 ssl http2;
        server_name sub.domain.tld;

        ssl_certificate /opt/ssl/domain.tld.pem;
        ssl_certificate_key /opt/ssl/domain.tld-key.pem;

        include snippets/ssl.conf;

        access_log /tmp/nginx.log combined;

        add_header 'Access-Control-Allow-Origin' "*" always;
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization,X-Refresh-Token';

        location /auth {
                if ($request_method = OPTIONS ) {
                        add_header "Access-Control-Allow-Origin"  "*" always;
                        add_header "Access-Control-Allow-Methods" "GET, POST, OPTIONS, HEAD";
                        add_header "Access-Control-Allow-Headers" "Authorization, Origin, X-Requested-With, Content-Type, Accept, X-Refresh-Token";
                        return 200;
                }

                proxy_pass http://localhost:2394;
                proxy_set_header Host $host;
                proxy_set_header X-Real-IP $remote_addr;
        }

        location / {
                if ($request_method = OPTIONS ) {
                        add_header "Access-Control-Allow-Origin"  "*" always;
                        add_header "Access-Control-Allow-Methods" "GET, POST, OPTIONS, HEAD";
                        add_header "Access-Control-Allow-Headers" "Authorization, Origin, X-Requested-With, Content-Type, Accept, X-Refresh-Token";
                        return 200;
                }

                proxy_pass http://localhost:8935;
                proxy_set_header Host $host;
                proxy_set_header X-Real-IP $remote_addr;
        }
}

And the vue.config.js:

module.exports = {
        devServer: {
                disableHostCheck: true,
                proxy: 'https://sub.domain.tld/'
        }
}

The only problem is that I still get errors from I guess the live error displaying / live refresh included in vue-cli (In french sorry, but it's basically a CORS error message):

Blocage d’une requête multiorigines (Cross-Origin Request) : la politique « Same Origin » ne permet pas de consulter la ressource distante située sur https://192.168.1.12:8935/sockjs-node/info?t=1609950092054. Raison : échec de la requête CORS.

Answer 1

So in the end I got it working with the following setup:

I let vue-cli / webpack know that my browser will access from the given url:

vue.config.js

module.exports = {
  publicPath: '/app/', // Only required if the app is not at the root
  devServer: {
    "public": "sub.domain.tld"
  }
}

Then it's simply a case of configuring nginx correctly. There is no need for CORS in this case since everything is served from the same domain.

server {
        listen      80;
        server_name sub.domain.tld;
        return 301 https://$server_name$request_uri;
}

server {
        listen 443 ssl http2;
        server_name sub.domain.tld;

        ssl_certificate /opt/ssl/domain.tld.pem;
        ssl_certificate_key /opt/ssl/domain.tld-key.pem;

        include snippets/ssl.conf;

        access_log /tmp/nginx.log combined;

        # My golang backend
        location / {
            proxy_pass http://localhost:1635;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "Upgrade";
            proxy_set_header Host $host;
        }

        # My VueJS app
        location /app {
            proxy_pass http://localhost:8080;
        }

        # Access for webpack WS for debug
        location /sockjs-node {
            proxy_pass http://localhost:8080;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "Upgrade";
            proxy_set_header Host $host;
        }

        # Since I'm building my app on a sub-path I want the root to redirect to it
        location = / {
            return 301 $scheme://$host/app;
        }
}