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

これだけみるとどこが悪いのか分からない。

が、送信しようとすると「301」で返ってくる。。

そもそもステータス301とは？

ステータス301は「 301 Moved Permanently 」で、

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

MDN Web Docs

 

3 tweets

13 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

「/（スラッシュ）を付け足せばいい」的なことが書いてある。

というわけで、「/」を加えてみる。

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

これで通信してみると。。。。直った！！

スラッシュは忘れずつけよう。