JS Fetch API no funciona con ASP.NET Core 2 con el atributo Autorizar

Tengo el siguiente código en el lado del cliente:

fetch("/music/index", { headers: { "Content-Type": "application/json" } }) .then(response => { if (!response.ok) { throw response; } return response.json(); }) .then(json => { console.log("Done! It's all good"); }) .catch(response => console.log(response)); 

Desafortunadamente, esto ni siquiera llega al MusicController (servidor), que tiene el siguiente aspecto (simplificado para ilustrar el punto):

 [Authorize] public class MusicController : Controller { public async Task Index() { IEnumerable songs = await _songsRepository.GetAll(); return Json(songs); } } 

Por lo que veo en la consola de desarrolladores que estoy siendo redirigido a /Account/Login?returnUrl...

Mientras tanto, usando el api de jquery, todo parece funcionar bien:

 $.get("/music/index") .done(json => console.log("Done! It's all good")) .fail(error => console.log(error)); 

Tengo la sospecha de que no estoy configurando mis encabezados, ¿verdad? No estoy seguro de no haber encontrado nada en la red. También este código (o más bien muy similar) solía funcionar en versiones anteriores (no Core) de ASP.NET.

Es necesario configurar la opción credenciales en la zona de scope, esto hace lo siguiente:

La propiedad de solo lectura de credenciales de la interfaz de Solicitud indica si el agente de usuario debe enviar cookies desde el otro dominio en el caso de solicitudes de origen cruzado. Esto es similar a la bandera de withCredentials XHR, pero con tres valores disponibles (en lugar de dos)

  • omit : nunca enviar cookies.
  • same-origin : envíe credenciales de usuario (cookies, autenticación http básica, etc.) si la URL está en el mismo origen que el script de llamada. Este es el valor predeterminado.
  • include : enviar siempre credenciales de usuario (cookies, autenticación http básica, etc.), incluso para llamadas de origen cruzado.

Fuente

Tu búsqueda ahora se vería así:

 fetch("/music/index", { headers: { "Content-Type": "application/json" }, credentials: 'include' }) .then(response => { if (!response.ok) { throw response; } return response.json(); }) .then(json => { console.log("Done! It's all good"); }) .catch(response => console.log(response));