Chromeの開発者ツールでみるとリクエストがCanceledだったときの原因

あきぞらです。

Chromeでとある処理を確認していて、開発者ツールでリクエストを確認していたときのことです。

『Status』が200にも500にも400にもならず、「Canceled」になってしまいました。

これではバックエンドに問題があるのか、フロント側に問題があるのか分からず、途方にくれました。

しかし、あるときJavaScriptのコードを見直していたとき、あることに気が付きました。

jQuery(function($){
    $('button').on('click', function(){
        $.ajax({
            url: //～～～～,
            type: 'POST',
            datatype: 'json',
            timeout: 3000,
　　　....
     ....
    });
});

「timeout が3秒設定されている・・・！」

これではないかと思い、外してみると、無事にステータスが200になりました。

重い処理のときはタイムアウト設定を見直してみると良いかもしれません。