Сбой безопасного соединения WebSocket между приложением Vue 3 и серверной частью .NET 8 (код: 1006) ⇐ C#

[Anonymous]

Я столкнулся с неприятной проблемой с безопасными WebSockets в моем проекте. У меня есть серверная часть .NET 8.0, на которой размещено веб-приложение Vue 3 на локальном хосте: 443 с использованием самозаверяющего сертификата разработки. Веб-приложение пытается подключиться к конечной точке WebSocket (

Код: Выделить всё

/ws

), предоставляемый той же серверной частью, но соединение завершается с ошибкой CloseEvent с кодом 1006.

Наблюдения :

• При использовании клиентов WebSocket, таких как расширения Postman или Chrome (например, «Тестовый клиент WebSocket»), соединение работает отлично.
• При подключении через В приложении Vue 3, работающем на том же хосте, WebSocket не работает без особых объяснений.
• Если я использую http, все работает нормально.

Настройка серверной части:

• Контроллер WebSocket:

Код: Выделить всё

[Route("/[controller]")]
public class WsController : ControllerBase
{
[HttpGet]
public async Task Echo()
{
if (HttpContext.WebSockets.IsWebSocketRequest)
{
using (var webSocket = await HttpContext.WebSockets.AcceptWebSocketAsync())
{
var buffer = new byte[1024 * 4];
var receiveResult = await webSocket.ReceiveAsync(
new ArraySegment(buffer), CancellationToken.None);

while (!receiveResult.CloseStatus.HasValue)
{
await webSocket.SendAsync(
new ArraySegment(buffer, 0, receiveResult.Count),
receiveResult.MessageType,
receiveResult.EndOfMessage,
CancellationToken.None);

receiveResult = await webSocket.ReceiveAsync(
new ArraySegment(buffer), CancellationToken.None);
}

await webSocket.CloseAsync(
receiveResult.CloseStatus.Value,
receiveResult.CloseStatusDescription,
CancellationToken.None);
}
}
}
}

• Хостинг веб-приложений Vue:

Приложение Vue компилируется в папку /dist и обслуживается в /webapp:

Код: Выделить всё

app.Map("/webapp", false, builder =>
{
builder.UseSpa(spa =>
{
var path = Path.Combine(Path.GetDirectoryName(Assembly.GetEntryAssembly().Location), "dist");

StaticFileOptions clientAppDist = new StaticFileOptions()
{
FileProvider = new PhysicalFileProvider(path)
};

builder.UseSpaStaticFiles(clientAppDist);
spa.Options.DefaultPageStaticFileOptions = clientAppDist;
});
});

Код веб-приложения Vue 3:

Код: Выделить всё

import { ref } from "vue";

const status = ref("disconnected");

let ws: WebSocket | undefined;

function start() {
if (ws?.readyState === WebSocket.OPEN) {
ws.close();
return;
}

const url = window.origin.replace(/^http/, "ws") + "/ws";
ws = new WebSocket(url);
ws.onopen = () => {
status.value = "connected";
ws?.send("Hello from client");
};
ws.onmessage = (rec) => {
console.log("Message received: " + rec);
};
ws.onclose = (evt) => {
status.value = "disconnected";
console.log("Connection closed", evt);
};
ws.onerror = (evt) => {
status.value = "error";
console.log("Connection error", status, evt);
};
}



WS status: {{ status }}
Connect

Что я пробовал:

• Проверил, что серверная часть работает с использованием расширений Postman и Chrome.
• Пыталась также добавить localhost в webSocketOptions.AllowedOrigins, но безуспешно.
• Использовался действительный URL-адрес WebSocket (ws:// или wss:// в зависимости от происхождение).
• Проверены журналы браузера; единственная подсказка — это CloseEvent с кодом 1006.
  Использование сертификата, подписанного внутренним центром сертификации (корневой сертификат которого добавлен в доверенные корневые центры сертификации), безуспешно.

Вопрос:

Почему не удается подключиться к WebSocket из приложения Vue при работе с внешними клиентами, такими как Postman? Какие дополнительные действия мне следует предпринять, чтобы отладить или исправить эту проблему?


Подробнее здесь: https://stackoverflow.com/questions/792 ... nd-code-10