React Axios - токен запроса С# WebAPI проваливается без ошибки сервера

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

var qs = require('qs');

const ROOT_URL = 'http://localhost:56765/';
const data = qs.stringify({ username, password, grant_type: 'password' });
axios.post(`${ROOT_URL}token`, data)
.then(response => {
    debugger;
    dispatch(authUser());
    localStorage.setItem('token', response.data.token);
})
.catch((error) => {
    debugger;
    dispatch(authError(error.response));
});

Когда я запускаю этот код, я удаляю отладчик, а объект ошибки имеет Error: Network Error at createError (http://localhost:3000/static/js/bundle.js:2188:15) at XMLHttpRequest.handleError (http://localhost:3000/static/js/bundle.js:1724:14) в блоке catch. Однако на вкладке "Сеть" в Chrome код состояния равен 200, но когда я нажимаю вкладки ответа/предварительного просмотра этого запроса, данных нет. Если я нажму на продолжение, я на самом деле получаю токен и другие данные на вкладке ответа/предварительного просмотра, как ожидалось, но в этот момент он уже достиг блока catch, поэтому он не попадет в блок then.

Я даже отлаживал фоновый код, и он не отправляет обратно ошибку, поэтому я предполагаю, что это ошибка переднего конца. Кто-нибудь знает, что вызывает это?

Edit:

Чтобы добавить более подробную информацию, если я изменю запрос на работу с fetch вместо axios, я получаю другую ошибку TypeError: Failed to fetch. Код, используемый для вызова:

fetch(`${ROOT_URL}token`, {
    method: 'POST',
    body: data
})

Кроме того, это пример правильного запроса почтальона:

Ответ 1

Наконец я нашел ответ. Оказывается, я не включил CORS в моем WebAPI-сервере для конечной точки /token. Способ, которым я смог разрешить это, - включить CORS в MyProject\Providers\ApplicationOAuthProvider.cs, добавив строку context.OwinContext.Response.Headers.Add("Access-Control-Allow-Origin", new[] { "*" }); в начало метода с именем GrantResourceOwnerCredentials. Я действительно думаю, что есть лучшие способы включить CORS для всего проекта, который я буду смотреть дальше!

Получите некоторую помощь отсюда о том, как включить CORS: Включить проверку подлинности CORS для веб-Api 2 и OWIN

Ответ 2

Он должен работать с выборкой путем добавления типа содержимого:

fetch(`${ROOT_URL}token`, {
    method: 'POST',
    headers: {'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'},
    body: data
})

Вы можете попробовать это и в аксиомах, но, похоже, это связано с axios bug, вы можете попробовать, добавив params свойство:

axios.post(`${ROOT_URL}token`, data, params: data)