Token im HttpOnly-Cookie wird bei Verwendung von include nicht gesendet ⇐ JavaScript

[Anonymous]

Ich versuche, eine einfache Chat-Website für ein Schulprojekt zu erstellen. Das Frontend ist Vanilla JS und das Backend ist ASP DOTNET 8. Jetzt habe ich große Probleme mit der Autorisierung. Anmelden und Registrieren funktionieren einwandfrei, aber wenn ich versuche, einen API-Aufruf durchzuführen, um mit [authorize] nach einem Benutzer für einen Controller zu suchen, erhalte ich ständig eine 401. Ich weiß, warum ich eine 401 erhalte, weil ich mit dem Code unten nach einem Wert im Token suche, wer auch immer dort nichts ist.
Meine Frage ist, dass ich nicht weiß, wie ich das Problem beheben kann. Ich habe verschiedene Dinge ausprobiert, aber nichts scheint zu helfen, warum das JWT-Token nicht zurückgesendet wird, damit es vom Back-End autorisiert werden kann.

Code: Select all

options.Events = new JwtBearerEvents
{
OnMessageReceived = context =>
{
// Log all cookies
Console.WriteLine("=== OnMessageReceived ===");
Console.WriteLine($"Cookies received: {string.Join(", ", context.Request.Cookies.Keys)}");

// 1) SignalR websocket transports send access_token in query string
var accessToken = context.Request.Query["access_token"].FirstOrDefault();
if (!string.IsNullOrEmpty(accessToken))
{
Console.WriteLine(" Token found in query string");
context.Token = accessToken;
return Task.CompletedTask;
}

// 2) fallback to the AuthToken cookie
if (context.Request.Cookies.TryGetValue("AuthToken", out var cookieToken) && !string.IsNullOrEmpty(cookieToken))
{
Console.WriteLine($" Token found in AuthToken cookie: {cookieToken.Substring(0, 20)}...");
context.Token = cookieToken;
}
else
{
Console.WriteLine(" No AuthToken cookie found!");
}

return Task.CompletedTask;
}
};

Der folgende Code zeigt also, wie der Code im Frontend aussieht, und es gibt auch Code für SignalR, aber das funktioniert im Moment ganz gut. Es handelt sich in erster Linie um die Suchfunktion für einen Benutzer. Hier ist der Code.

Code: Select all

render() {
const root = document.createElement('div');
root.innerHTML = `


Users

Search



Chat no one


Send Refresh


`;
root.querySelector('#searchBtn').addEventListener('click', async ()=> {
const q = root.querySelector('#search').value;
const res = await fetch(API + '/api/Users/search?q=' + encodeURIComponent(q), { withCredentials: true });
const users = await res.json();
const usersEl = root.querySelector('#users');
usersEl.innerHTML = '';
users.forEach(u=> {

Ich weiß, dass es nicht der schönste Code ist, den ich mir ansehen kann, aber nachdem ich eine Woche lang hier feststeckte, hat das für mich die geringste Priorität, also weiß ich es. Hier ist auch der Back-End-Code, von dem aus ich den Anruf tätige.

Code: Select all

using ChatBackendFinal.Services;
using Microsoft.AspNetCore.Authentication.JwtBearer;
using Microsoft.AspNetCore.Authorization;
using Microsoft.AspNetCore.Mvc;

namespace ChatBackendFinal.Controllers
{
[ApiController]
[Route("api/Users")]
[Authorize(Policy = "AuthenticatedUsersOnly")]
public class UsersController : ControllerBase
{
private readonly IUserService _userService;
public UsersController(IUserService userService)
{
_userService = userService;
}
[HttpGet("search")]
public async Task SearchUsers([FromQuery] string query)
{
var users = await _userService.SearchAsync(query);
var result = users.Select(u => new { u.Id, u.Username, u.Email });
return Ok(result);
}
}
}