本地 Vue.js 应用程序通过 HTTPS 设置的 HMR 显示跨域请求被阻止答案

【问题标题】：HMR for Local Vue.js App Over HTTPS Setup Shows Cross-Origin Request Blocked本地 Vue.js 应用程序通过 HTTPS 设置的 HMR 显示跨域请求被阻止
【发布时间】：2020-02-03 09:15:26
【问题描述】：

1。我的球童版本 (`caddy -version`)：

v2.0.0-beta.13 h1:QL0JAepFvLVtOatABqniuDRQ4HmtvWuuSWZW24qVVtk=

2。我如何运行 Caddy：

一个。系统环境：

我在macOS Mojave - 10.14.6 上使用 caddy 服务器静态二进制文件，并在$PATH 中将二进制文件作为caddy 命令提供。

湾。命令：

caddy

d。我完整的 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。我遇到的问题：

我第一次尝试设置 caddy 服务器来运行两个应用程序，每个应用程序将通过 HTTPS 在主域的子域下运行。其中一个是基于 express.js 的后端，另一个是基于 Vue.js 的前端。

目前看来一切正常，但是 Vue.js 在开发时构建的 Sockets and Hot Module Replacement 无法正常工作。

4。错误消息和/或完整的日志输出：

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。我已经尝试过的：

我没有具体的尝试可以分享，但尝试应用 VueJS dev serve with reverse proxy 文章中提到的内容，但我无法使其工作。

#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
#  }
#}

如果有人帮助我使这个本地开发工作完全由 caddy 服务器作为 HTTPS 上的反向代理支持，如果我在该 Caddyfile 中有任何不正确的设置，请纠正我，因为我没有足够的知识到目前为止所写的内容，只是尝试应用旧指令“透明”并使设置与下面文章中提到的相同。

6。相关资源的链接：

VueJS dev serve with reverse proxy

【问题讨论】：

标签： vue.js reverse-proxy webpack-hmr caddy caddyfile

【解决方案1】：

我想我找到了解决办法。

我不得不更改 vue.config.js 文件中 devServer 的 public 条目

// vue.config.js file

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

当我为 Vue 应用程序运行开发服务器时

$ npm run serve

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

我现在从浏览器访问https://frontend.cdy.test/，不再看到这些 CORS 错误。