JavaScript/jQuery

【Ajax】Ajax通信でステータス「301」エラーになったときの対応方法!

あきぞらです。

フロントエンド開発をしていて、

Ajax通信でレスポンスが301になりエラーとなってしまう事象に遭遇しました。

回避方法が分かったので今回はその方法を紹介していきます。

事象発生時のコード

事象が発生していた時のコードは、こんな感じに実装していました。

$.ajax({
    url: hostUrl + '/api/entry',
    type:'POST',
    dataType: 'json',
    data : postData,
    timeout:3000,
}).done(function(data) {
  // 処理 //
}).fail(function(XMLHttpRequest, textStatus, errorThrown) {
  // 処理 //
});

これだけみるとどこが悪いのか分かりませんでした…。

しかし、POST送信すると、HTTPステータス「301」で返ってくるようです。

そもそもステータス301とは何か?

ステータス301は「 301 Moved Permanently 」と定義されており、

リクエストされたリソースが Location ヘッダーで示された URL へ完全に移動したことを示します。

原因と回避方法

原因はよくわからないが、リダイレクトしているようなので、

URLに問題があるのではと考えました。

そこで調べていると、こんな記事を見つけました。

「/(スラッシュ)」を付け足すことで解消されるかもしれません。

というわけで、URLに「/」を加えてみます。

$.ajax({
    url: hostUrl + '/api/entry/',    //← スラッシュを追加
    type:'POST',
    dataType: 'json',
    data : postData,
    timeout:3000,
}).done(function(data) {
    // 処理 //
}).fail(function(XMLHttpRequest, textStatus, errorThrown) {
    // 処理 //
});

これで再度、POST送信をしてみると、直りました!

-JavaScript/jQuery
-, , ,

Copyright© あきぞらてっく , 2023 All Rights Reserved Powered by AFFINGER5.