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

Question

1。我的 Caddy 版本 (`caddy -version`):

v2.0.0-beta.13 h1:QL0JAepFvLVtOatABqniuDRQ4HmtvWuuSWZW24qVVtk=

2。我如何运行球童：

一种。系统环境：

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

b.命令：

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 在开发期间构建的 套接字和热模块替换 无法正常工作。

4。错误消息 and/or 完整日志输出：

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 中有任何不正确的设置，请更正我，因为我没有足够的到目前为止所写内容的知识，只是尝试应用旧指令 "transparent" 并使设置工作与下面文章中提到的相同。

6.相关资源链接：

VueJS dev serve with reverse proxy

Answer 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 错误。

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

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

reverse-proxy

vue.js

webpack-hmr

caddy

caddyfile

1。我的 Caddy 版本 (`caddy -version`):

2。我如何运行球童：

3。我遇到的问题：

4。错误消息 and/or 完整日志输出：

5。我已经尝试过的：

6.相关资源链接：

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

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

reverse-proxy

vue.js

webpack-hmr

caddy

caddyfile

1。我的 Caddy 版本 (caddy -version):

2。我如何 运行 球童：

3。我遇到的问题：

4。错误消息 and/or 完整日志输出：

5。我已经尝试过的：

6.相关资源链接：

1。我的 Caddy 版本 (`caddy -version`):

2。我如何运行球童：