javascript - 如何修复 “Failed to load resource: the server responded with a status of 400 ()” API获取错误

Question

我正在构建一个PWA应用程序，我需要在其中调用使用asp.net核心构建的API。当我尝试通过JavaScript fetch函数调用POST时，出现以下错误:
加载资源失败:服务器响应状态为400()

我通过 postman 测试了此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; }
    }

后API Controller :

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

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

任何的想法？

更新:

我用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

使用对象:

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