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設定のサーバー定義エリアが追加されます。
<スパン
4. nginxが正しく設定されているかテストする
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つのアイデアは時系列で書かれており、実際のプロジェクトでの最終的な機能実装も、最終結果より先に更新されています。しかし、このような似たような経験があると、次にそのような回り道に遭遇したときに救われると同時に、自分なりの対処法をより成熟させることができます。
関連
-
vue3レスポンシブ対応のためのsetup+ref+reactive
-
Vue Element-uiは、アイコンを追加するためのツリーコントロールノードを詳細に実装しています。
-
jQueryのコピーオブジェクトの説明
-
JavaScriptのクロージャの説明
-
Vueの「データを聴く」原則を解説
-
[解決済み】React Nativeアプリをターミナルから実行するとエラーが発生する(iOS)
-
[解決済み】<select>で現在選択されている<option>をJavaScriptで取得するにはどうすればよいですか?
-
JavaScriptのgetElementById()メソッド入門
-
ローカルリソースのロードが許可されていない
-
Uncaught TypeError: null のプロパティ 'appendChild' を読み取れませんでした。
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
Vueの一般的な組み込みディレクティブの説明
-
[解決済み】React - uncaught TypeError: 未定義のプロパティ 'setState' を読み取れない
-
[解決済み] Error : 未定義のプロパティ 'map' を読み取ることができません。
-
[解決済み】TypeErrorの解決方法。未定義またはヌルをオブジェクトに変換できない
-
[解決済み】JavaScript TypeError: null のプロパティ 'style' を読み取ることができない
-
[解決済み】JavaScriptエラー(Uncaught SyntaxError: Unexpected end of input)
-
[解決済み】JavaScriptでインラインIF文の書き方は?
-
[解決済み】リクエストに失敗していないのに、「TypeError: failed to fetch」が表示される。
-
nullのプロパティinnerHTMLを読み取れません エラーメッセージ
-
JSクリックイベント - Uncaught TypeError: プロパティ 'onclick' に null を設定できません。