Question

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

使用对象：

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

Answer 2

事实证明问题出在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);
        });

如何修复“无法加载资源：服务器以400（）状态响应” API提取错误

2 个答案: