HMR для локального приложения Vue.js через настройку HTTPS показывает, что запрос из другого источника заблокирован

1. Моя версия Кэдди (`caddy -version`):

v2.0.0-beta.13 h1:QL0JAepFvLVtOatABqniuDRQ4HmtvWuuSWZW24qVVtk=

2. Как я запускаю Кэдди:

a. System environment:

Я использую статический двоичный файл caddy server на macOS Mojave - 10.14.6 и делаю двоичный файл доступным как команду caddy в $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. Проблема, с которой я столкнулся:

Впервые я пытаюсь настроить caddy-сервер для запуска двух приложений, каждое из которых будет работать в поддомене основного домена через HTTPS. Один из них — бэкэнд на основе express.js, другой — интерфейс на основе Vue.js.

Кажется, пока все работает, но Sockets and Hot Module Replacement, созданный Vue.js во время разработки, не может работать должным образом.

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 с обратным прокси-сервером, но я не могу заставить это работать.

#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 с обратным прокси-сервером

Ahmed Shendy 03.02.2020 источник

Ответы (1)

arrow_upward
0
arrow_downward

Я думаю, что нашел решение.

Мне пришлось изменить запись 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.

Ahmed Shendy 08.02.2020