Как исправить ошибку «Ошибка загрузки API: сервер ответил со статусом 400 ()»

Question

Я создаю приложение PWA, где мне нужно вызвать API, созданный с использованием ядра asp.net.Когда я пытался вызвать POST через функцию выборки JavaScript, я получаю следующую ошибку: Не удалось загрузить ресурс: сервер ответил со статусом 400 ()

Я протестировал этот API через Почтальон, и онработает нормально.Я попытался получить метод GET, и он работает нормально.

модель подписки:

    public class Subscription
    {
        public string endpoint { set; get; }
        public DateTime ? expirationTime { set; get; }
        public Key keys { set; get; }
    }

модель ключей:

    public class Key
    {
        public string p256dh { set; get; }
        public string auth { set; get; }
    }

контроллер post api:

    [Route("api/[controller]")]
    [ApiController]
    public class PushNotificationController : ControllerBase
    {
       [HttpPost]
        public void Post([FromBody] Subscription sub )
        {
            Console.WriteLine(sub);
        }
    }

вызов вызова

async function send() {

    await
        fetch('https://localhost:44385/api/PushNotification', {
            mode: 'no-cors',
            method: 'POST',
            body: { "endpoint": "123", "expirationTime": null, "keys": { "p256dh": "ttdd", "auth": "dssd" } },
            headers: {
                'content-type': 'application/json'
            }
        }).catch(function (erro) {
            console.log("Error comunicateing to server");
        });

}


send();

Есть идеи?

Обновлено:

Я пробовал приведенный ниже код с JSON.stringify (data), но все еще получаю то же самоеошибка.

const data = {
        endpoint: "123",
        expirationTime: null,
        keys: {
            p256dh: "p256dh test",
            auth: "auth test"
        } 
    };



    await
        fetch('https://localhost:44385/api/PushNotification', {
            method: 'POST',
            mode: 'no-cors',
            cache: 'no-cache',
            credentials: 'same-origin' ,

            headers: {
                'content-type': 'application/json'
            },
            body: JSON.stringify(data)

        }).catch(function (erro) {
            console.log(erro);
        });

Answer 1

Оказывается, проблема в режиме cors. Либо удалите его, либо установите «cors».

await fetch('https://localhost:44385/api/PushNotification', {
            method: 'POST',
            mode: 'cors',
            cache: 'no-cache',
            credentials: 'same-origin' ,

            headers: {
                'content-type': 'application/json'
            },
            body: JSON.stringify(data)

        }).catch(function (erro) {
            console.log(erro);
        });

Answer 2

Использование объекта:

fetch('https://localhost/', {
    method: 'POST',
    body: {
        foo: "bar"
    }
})

В этом случае тело, скорее всего, будет: [object Object].

Но преобразование объекта в JSON:

fetch('https://localhost/', {
    method: 'POST',
    body: JSON.stringify({
        foo: "bar"
    })
})

Тело будет {"foo":"bar"}

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch#Supplying_request_options