1

1. 我的球童版本（caddy -version）：

v2.0.0-beta.13 h1:QL0JAepFvLVtOatABqniuDRQ4HmtvWuuSWZW24qVVtk=

2. 我如何运行 Caddy：

一个。系统环境：

我在 上使用 caddy 服务器静态二进制文件macOS Mojave - 10.14.6，并使二进制文件caddy在$PATH.

湾。命令： 
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.我遇到的问题：

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

到目前为止似乎一切正常，但是 Vue.js 在开发时构建的Sockets 和 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.相关资源链接：

4

1 回答 1

0

我想我找到了解决方案。

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

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

于 2020-02-08T11:43:31.277 回答