1. ホーム
  2. JavaScript

413 Request Entity Too Largeエラー処理を解決するための3つのアイデア

2022-02-13 18:01:12

先日のプロジェクトで、画像のアップロードと画像サイズの制限を依頼されました。laravelでは大きすぎるファイルのアップロードを防ぐためにフォームバリデーションを入れていましたが、フォームを送信すると、laravelの処理になる前にnginxがエラーを報告しました。エラーページをよく見てみると、nginxのバージョン情報があり、解析の結果、nginxのデフォルトのアップロードファイルサイズの設定によりエラーが報告されていることがわかりました client_max_body_sizeが2MBしかない。  nginxの検証はlaravelの検証より早く、413 Request Entity Too Largeを直接表示するのではなく、フレンドリーな方法でエラーを報告したい場合、それを解決するための3つのアイディアがあります。

<スパン アイデア1:nginxの設定を変更する

<スパン これは、最も簡単なことの一つです。エラーの原因は、nginx が設定に対して大きすぎるファイルのアップロードを許可しないためで、nginx のアップロードサイズの設定を上げるとよいでしょう。

<スパン     1. 通常 /usr/local/nginx/conf/nginx.conf の場所にある nginx のメイン設定ファイル nginx.conf を開き、http{} の段落を見つけて以下のように修正します。

client_max_body_size 2m;

<スパン ここで、2mは必要な許容ファイルサイズに修正されます。
   2. 修正後、nginxの設定が正しいかどうかテストする
/usr/local/nginx/sbin/nginx -t

<スパン <スパン 3. 正しい設定を確認したら、nginx を再起動して設定を有効にします。
/etc/init.d/nginx restart

注意:phpで実行する場合、投稿サイズの不整合によるエラーが発生しないように、php.iniのclient_max_body_sizeは以下の値とほぼ同じか少し大きめに設定する必要があります。
post_max_size = 2M
upload_max_filesize = 2M

<スパン <スパン <スパン 2mが必要な許容ファイルサイズに修正されたとき。 そこにある2mを、最初のステップで設定したサイズに変更します。

<スパン <スパン アイデア2 フレンドリーなエラー報告ページを追加するように修正

<スパン <スパン プロジェクトテストでは、413 Request Entity Too Large エラーが表示されないようにする必要があるので、フレンドリーなエラーページを追加する必要があります。
  1. シンプルなhtmを静的なフレンドリーページとして編集する
(htmlファイルが文字化けしていることに注意してください。 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">)
2. nginx.confを変更して、httpの定義部分に追加します。
 fastcgi_intercept_errors on; 

3. nginxのsite conf設定のサーバー定義エリアが追加されます。 
<スパン
error_page 413 /413.htm;  

(413と/413.htmの間に等号がないことに注意してください。さもないとステータスコードが413ではなく200になってしまいます。) http://www.xxx.com/404.html出错则会跳过该页面 にしないようにしましょう。 
4. nginxが正しく設定されているかテストする
/usr/local/nginx/sbin/nginx -t

5. 前のステップでnginxの再起動に成功した場合 
<スパン
  /etc/init.d/nginx restart





 アイデア3:JSを使ってフォーム送信前に判断してブロックする

<スパン 2番目のアイデアは、最初のアイデアよりもいくつかの進歩を持っていますが、リマインダーはまだページを跳んだので、ユーザーの経験は、最終的に3番目のアイデアを考えて、どこに良いものではありません。上記は、この413エラーは、バックエンドのnginx、PHPよりもnginxの判断からですが、我々は直接ああ、フロントエンドの処理からすることができます言われている!このような場合、我々は、このような問題を解決することができます。それについて考えると、それは実現することは困難ではありません。あなたは、ファイルがサイズ制限を超えているかどうかを判断するために、ファイルのアップロードイベントを追加することができますし、警告ボックスをポップアップし、送信ボタンの有効期限が切れるように、ファイルがサイズ制限を超えていない場合は、正しいサイズを求めると前のボタンの有効期限が切れるステータスを削除します。
   シンプルなHTMLコードです。
                <form action="" method="post" enctype="multipart/form-data">                  
                    <div class="form-group">
                        <label for="picture">Article display image (within 800KB):</label>
                        <input id="picture" name="picture" type="file"/>
                    </div>
                        <button type="submit" id="submit" class="am-btn am-btn-success"><span class="am-icon-send& quot;></span>
                            Publish
                        </button>
                    </p>
                </form>





<スパン JSコードです。
  $('#picture').bind('change', function () {
            if (this.files[0].size / 1024 / 1024 > 0.8){
                value = this.files[0].size/1024;
                alert('The file size is ' + value .toFixed(0) + "KB, the size limit has been exceeded, please change it! ");
                document.getElementById("submit").disabled=true;
                document.getElementById("submit").innerHTML='Illegal image content';
            }else{
                alert('The file can be submitted!') ;
                document.getElementById("submit").disabled=false;
                document.getElementById("submit").innerHTML='submit';
            }
        });






まとめ:実は3つのアイデアは時系列で書かれており、実際のプロジェクトでの最終的な機能実装も、最終結果より先に更新されています。しかし、このような似たような経験があると、次にそのような回り道に遭遇したときに救われると同時に、自分なりの対処法をより成熟させることができます。