1. ホーム
  2. javascript

[解決済み] Failed to load resource: server responded with status of 400 ()" API フェッチエラーの修正方法

2022-02-05 16:45:22

質問

私はPWAアプリケーションを構築しており、asp.net coreで構築されたAPIを呼び出す必要があります。JavaScriptのfetch関数でPOSTを呼び出そうとすると、以下のエラーが発生します。 リソースの読み込みに失敗しました:サーバーは400のステータスで応答しました()。

このAPIをPostmanでテストしたところ、正常に動作しています。 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);
        });

解決方法は?

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