【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 へ完全に移動したことを示します。

MDN Web Docs

 

3 tweets

24 users

HTTP レスポンスステータスコード

https://developer.mozilla.org/ja/docs/Web/HTTP/Status

HTTP レスポンスステータスコードは、特定の HTTP リクエストが正常に完了したどうかを示します。レスポンスは 5 つのクラスに分類されています。 情報レスポンス (100–199), 成功レスポンス (200–299), リダイレクト (300–399), クライアントエラー (400–499), サー...

原因と回避方法

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

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

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

stackoverrun.com

403 Forbidden

https://stackoverrun.com/ja/q/3321511

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

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

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

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