How to fix "Failed to load resource: the server responded with a status of 400 ()" API fetch error

Question

I am building up a PWA application where I need to call a API built with asp.net core. When I tried to call a POST through the JavaScript fetch function I am getting the following error: Failed to load resource: the server responded with a status of 400 ()

I tested this API through the Postman and it is working fine. I tried fetch of GET method and it is working fine.

subscription model:

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

keys model:

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

post api controller:

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

fetch call

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

Any idea?

Updated:

I tried the below code with JSON.stringify(data) but still getting the same error.

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

m1k1o m1k1o · Accepted Answer · 2019-06-03T23:39:24

Using object:

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

In this case body will likely be: [object Object].

But converting object to JSON:

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

Body will be {"foo":"bar"}

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

How to fix "Failed to load resource: the server responded with a status of 400 ()" API fetch error

2 Answers