Angular 5.0: прокси-сервер

Я пытаюсь проксировать веб-сокет с помощью angular CLI, но это не работает.

Вот моя конфигурация прокси proxy.conf.json

   {
          "/stream/*": {
            "target": "ws://demos.kaazing.com/echo",
            "secure": false,
            "ws": true
          }
   }

Я запускаю сервер со следующими параметрами

"serve": {
  "port": 5000,
  "host": "0.0.0.0"
}

Пример HTML-кода:

<!DOCTYPE html>
<html lang = "en">

<head>
    <!-- Required meta tags -->
    <meta charset = "utf-8">
    <meta name = "viewport" content = "width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Page Title</title>
    <!-- Bootstrap CSS -->
    <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity = "sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin = "anonymous">
</head>

<body>
    <h1>Hello, world!</h1>
    <script>
    var socket = new WebSocket("ws://localhost:5000/stream/");
    // var socket = new WebSocket("ws://demos.kaazing.com/echo");
    socket.onopen = function() {
        console.info("Соединение установлено.");
    };

    socket.onclose = function(event) {
        if (event.wasClean) {
            console.info('Соединение закрыто чисто');
        } else {
            console.info('Обрыв соединения'); // например, "убит" процесс сервера
        }
        console.info('Код: ' + event.code + ' причина: ' + event.reason);
    };

    socket.onmessage = function(event) {
        console.info("Получены данные " + event.data);
    };

    socket.onerror = function(error) {
        console.info("Ошибка " + error.message);
    };
    </script>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin = "anonymous"></script>
    <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity = "sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin = "anonymous"></script>
    <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity = "sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin = "anonymous"></script>
</body>

</html>

У меня ошибка вроде

test.html:16 WebSocket connection to 'ws://localhost:5000/stream/' failed: Connection closed before receiving a handshake response

Этот закрытый вопрос: Angular CLI: прокси-сервер с proxy.conf.json мне не помог.

Вы используете https?

— 03.05.2018 15:12

Я не использую https

— 03.05.2018 15:14

angular npm proxy

03.05.2018 15:03

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Angular и React для вашего проекта веб-разработки?

Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...

Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf

Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.

Угловой продивер

Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.

Мое недавнее углубление в Angular

Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...

Освоение Observables и Subjects в Rxjs:

Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular

889

Ответы 1

Я нашел ответ. Я добавил параметры pathRewrite и changeOrigin в proxy.conf.json.

{
  "/stream": {
    "target": "ws://demos.kaazing.com/echo",
    "secure": false,
    "ws": true,
    "logLevel": "debug",
    "changeOrigin": true,
    "pathRewrite": {
      "^/stream": ""
    }
  }
}

03.05.2018 15:32

Другие вопросы по теме

Избегайте использования определенных пакетов узлов

Приложение Angular-5 не работает

Объедините пакеты библиотеки в пакет с одним узлом

Нет интернета внутри докера на виртуальной машине

Как вы используете NPM для получения файлов fontawesome pro css

Команда Node serve возвращает пустой ответ

Centos7, почему я не могу установить экспресс на свой сервер?

Различия между sudo npm install и npm install

Запуск нескольких скриптов node.js на Heroku

Как создавать и использовать многомодульные пакеты NPM, написанные на Typescript

Angular 5.0: прокси-сервер

Ответы 1

Другие вопросы по теме

Похожие вопросы