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

Help
1

1. My Caddy version (caddy -version):

v2.0.0-beta.13 h1:QL0JAepFvLVtOatABqniuDRQ4HmtvWuuSWZW24qVVtk=

2. How I run Caddy:

Please provide all of the relevant information and DO NOT REDACT anything except passwords/keys. Thank you!

a. System environment:

OS, relevant versions, systemd? docker? etc.

I am using caddy server static binary on macOS Mojave - 10.14.6

b. Command:

caddy

c. Service/unit/compose file: #NONE 

paste full file contents here

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:

Please describe the issue thoroughly enough so that anyone can reproduce the exact behavior you’re seeing. Be as specific as possible.

For first time, I found that I can use caddy server to run local development environment over HTTPS.
So, I started to learn how to setup it correctly to serve two apps each will run under subdomain of a main domain. 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:

Please DO NOT REDACT any information except passwords/keys.

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 much enough in what is written so far, just tried to apply old directive “transparent” and make settings work same as mentioned in the article.

6. Links to relevant resources:

2

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.

2 Likes
3

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.