JS Fetch API не работает с контроллерами ASP.NET Core 2 с атрибутом Authorize

Question

У меня следующий код на стороне клиента:

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));

К сожалению, он даже не достигает MusicController (на стороне сервера), который выглядит следующим образом (упрощенно для иллюстрацииточка):

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

Из того, что я вижу в консоли разработчика, меня перенаправляют на /Account/Login?returnUrl...

Между тем, используя jquery api, кажется, все работает нормально:

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

У меня есть подозрение, что я не правильно устанавливаю заголовки?Не уверен, что ничего не нашел в сети.Также этот (или, скорее, очень похожий) код, используемый для работы в предыдущих (не Core) версиях ASP.NET.

Answer 1

Вам необходимо установить опцию учетных данных в выборке, это делает следующее:

Свойство только для чтения в интерфейсе запроса указывает, должен ли пользовательский агент отправлять куки из другого домена.в случае перекрестных запросов.Это похоже на флаг withCredentials XHR, но с тремя доступными значениями (вместо двух)

• omit: никогда не отправлять файлы cookie.
• same-origin: отправлять учетные данные пользователя (файлы cookie, базовая аутентификация http и т. д.), если URL находится в том же источнике, что и вызывающий скрипт.Это значение по умолчанию.
• include: всегда отправлять учетные данные пользователя (файлы cookie, обычные http-аутентификации и т. Д.), Даже для вызовов из разных источников.

Источник

Ваша выборка теперь будет выглядеть так:

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));