Установить заголовок WebSocket Origin в JavaScript

В настоящее время я пробую Webpack и хочу отправить запрос WebSocket на определенный URL-адрес, однако для правильной проверки мне нужно установить заголовок Origin для моего сокета. Это легко сделать в Node.js с помощью WS lib, поскольку конструктор WebSocket принимает параметры. Однако, если я попытаюсь использовать WS lib и упаковать ее с помощью Webpack, я получаю сообщение об ошибке:

main.js:formatted:1542 Uncaught Error: ws does not work in the browser. Browser clients must use the native WebSocket object

Я понимаю, в чем проблема, однако не понимаю, как мне выполнить свою задачу, поскольку стандартная библиотека WebSocket не позволяет редактировать заголовки своих запросов.

Любая помощь будет оценена по достоинству.

Код с WS

import msgpack from 'msgpack-lite';
import WebSocket from 'ws';

function component() {

  var connection = new WebSocket('wss:social.krunker.io/ws',{
      headers: {
          origin: "https://krunker.io" // add origin header
      }
  });
  connection.binaryType = "arraybuffer";
  connection.onmessage = function(event) {
    let data = msgpack.decode(new Uint8Array(event.data)); // decode the binary data with msgpack.decode
    console.info("Incoming ->", data);
  };
  return element;
}

document.body.appendChild(component());

^ Выдает мне ошибку "ws не работает в браузере"

Код со стандартной библиотекой WebSocket

import msgpack from 'msgpack-lite';

function component() {

  var connection = new WebSocket('wss:social.krunker.io/ws');
  connection.binaryType = "arraybuffer";
  connection.onmessage = function(event) {
    let data = msgpack.decode(new Uint8Array(event.data)); // decode the binary data with msgpack.decode
    console.info("Incoming ->", data);
  };
  return element;
}

document.body.appendChild(component());

Подключение работает, однако ответ на запрос является сообщением об ошибке, поскольку мое происхождение неверно.

У меня есть этот пример, который безупречно работает в Node.js и Electron, однако мне нужно использовать другой протокол, чем File: //, чтобы иметь возможность вызывать капчи позже.

Единственное решение, которое я вижу в настоящее время, - это запустить мой html-файл на локальном сервере и отредактировать мой хост-файл, чтобы указать его IP-адрес на желаемое происхождение, чтобы обмануть веб-браузер.

Вы можете показать свой код?

Fakt309 06.04.2021 12:34

@ Fakt309 Я добавил это в свой пост

Malte 06.04.2021 12:40
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
2
26
1

Ответы 1

Я решил использовать другой подход к своей задаче. Чтобы обойти ограничение Origin, я в конечном итоге использовал Express вместе с Socket.io для создания веб-страницы, которая взаимодействует с моим сервером узла, который выполняет всю тяжелую работу по подключению, веб-страница используется для извлечения и решения капчи, а также работает как пользовательский интерфейс для моего экземпляра Node.

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