HMR для локального Vue. js Приложение поверх HTTPS Setup показывает заблокированный запрос кросс-источника - PullRequest
Новая
       92

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

0 голосов
/ 03 февраля 2020

1. Версия My Caddy (caddy -version):

v2.0.0-beta.13 h1:QL0JAepFvLVtOatABqniuDRQ4HmtvWuuSWZW24qVVtk=

2. Как я управляю Caddy:

a. Системная среда:

Я использую caddy server stati c binary на macOS Mojave - 10.14.6 и делаю двоичный файл доступным как команда caddy в $PATH.

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 server для запуска двух приложений, каждое из которых будет работать под поддоменом основного домена через HTTPS. Один из них - основанный на express. js бэкэнд, другой - Vue. js основанный на интерфейсе.

Кажется, что пока все работает, но замена сокетов и горячего модуля построено по 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 dev, с статьей обратного прокси , но я не могу заставить ее работать . 

#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 server в качестве обратного прокси-сервера через HTTPS, и если у меня есть какие-либо неправильные настройки в этом Caddyfile, исправьте меня, как я не обладаю достаточными знаниями в том, что написано до сих пор, просто попытался применить старую директиву «прозрачный» и заставить настройки работать так же, как указано в статье ниже.

6. Ссылки на соответствующие ресурсы:

1 Ответ

0 голосов
/ 08 февраля 2020

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

Мне пришлось изменить запись public из devServer в vue.config.js файле 

// vue.config.js file

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

Когда я запускаю сервер dev для 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

Теперь я обращаюсь к https://frontend.cdy.test/ из браузера и больше не вижу ошибок CORS.

...