HMR for Local Vue.js App Over HTTPS Setup Shows Cross-Origin Request Blocked

Question

1. My Caddy version (caddy -version):

v2.0.0-beta.13 h1:QL0JAepFvLVtOatABqniuDRQ4HmtvWuuSWZW24qVVtk=

2. How I run Caddy:

a. System environment:

I am using caddy server static binary on macOS Mojave - 10.14.6, and make the binary available as caddy command in $PATH.

b. Command:

caddy

d. My complete Caddyfile:

backend.cdy.test {
  tls ./_wildcard.cdy.test.pem ./_wildcard.cdy.test-key.pem

  reverse_proxy localhost:3000 {
    header_up Host {host}
    header_up Origin {host}
    header_up X-Real-IP {remote}
    header_up X-Forwarded-Host {host}
    header_up X-Forwarded-Server {host}
    header_up X-Forwarded-Port {port}
    header_up X-Forwarded-For {remote}
    header_up X-Forwarded-Proto {scheme}

    header_down Access-Control-Allow-Origin https://frontend.cdy.test
  }

}

frontend.cdy.test {
  tls ./_wildcard.cdy.test.pem ./_wildcard.cdy.test-key.pem

  reverse_proxy localhost:8080 {
    header_up Host "localhost"
    header_up X-Real-IP {remote}
    header_up X-Forwarded-Host "localhost"
    header_up X-Forwarded-Server "localhost"
    header_up X-Forwarded-Port {port}
    header_up X-Forwarded-For {remote}
    header_up X-Forwarded-Proto {scheme}
  }
}

3. The problem I'm having:

For first time, I am trying to setup caddy server to run two apps each will run under subdomain of a main domain over HTTPS. One of them is express.js based backend, the other is Vue.js based frontend.

It seems everything works so far, but the Sockets and Hot Module Replacement built by Vue.js while development cannot work well.

4. Error messages and/or full log output:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://192.168.5.10:8080/sockjs-node/info?t=1888826474028. (Reason: CORS request did not succeed).
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://localhost/sockjs-node/info?t=4740717588882. (Reason: CORS request did not succeed).

5. What I already tried:

There is no concrete trying I can share, but tried to apply what is mentioned in VueJS dev serve with reverse proxy article, but I cannot make it work.

#localhost {
#  reverse_proxy /sockjs-node localhost {
#    header_up Host "localhost"
#    header_up Origin "localhost"
#    header_up -Access-Control-Allow-Origin
#    header_up Access-Control-Allow-Origin https://frontend.cdy.test
#    header_up Connection {>Connection}
#    header_up Upgrade {>Upgrade}
#
#    header_down Access-Control-Allow-Origin https://frontend.cdy.test
#  }
#}

I would like if someone help me to make this local development works fully supported by caddy server as reverse proxy over HTTPS, and if I have any incorrect settings in that Caddyfile, please correct me as I don't have enough knowledge in what is written so far, just tried to apply old directive "transparent" and make settings work same as mentioned in below article.

6. Links to relevant resources:

• VueJS dev serve with reverse proxy

Answer 1

I think I found the solution.

I had to change the public of devServer entry in vue.config.js file

// vue.config.js file

module.exports = {
  transpileDependencies: ['vuetify'],
  devServer: {
    public: 'https://frontend.cdy.test',
    allowedHosts: ['.cdy.test']
  }
}

When I run dev server for the Vue application

$ npm run serve

  App running at:
  - Local:   http://localhost:8080/ 
  - Network: https://frontend.cdy.test/ <== This used to be http://192.168.5.13

I now access https://frontend.cdy.test/ from the browser and don't see those CORS errors anymore.