วิธีแก้ 413 payload too large ใน Angular มีดังนี้
- ตรวจสอบว่าขนาดของ payload ถูกต้องหรือไม่
- ตรวจสอบว่า server อนุญาตขนาดของ payload นั้นหรือไม่
หากขนาดของ payload เกินกว่าที่ server อนุญาต จะเกิดข้อผิดพลาด 413 payload too large
ตัวอย่างการแก้ 413 payload too large
สมมติว่าเรามี route ดังนี้
1 | const routes: Routes = [ |
หากเราพยายามส่ง HTTP request POST ไปที่ route นี้ด้วย payload ที่มีขนาด 2000000 ระบบจะเกิดข้อผิดพลาด 413 payload too large เนื่องจาก route นี้อนุญาตขนาดของ payload สูงสุด 1000000
วิธีแก้คือแก้ไข HTTP request ให้ใช้ payload ที่มีขนาดเล็กลงหรือแก้ไข route ให้อนุญาตขนาดของ payload ที่ใหญ่ขึ้น ตัวอย่างเช่น
แก้ไข HTTP request
1 | // ย่อขนาดของ payload |
แก้ไข route
1 | const routes: Routes = [ |
วิธีแก้ 413 payload too large แบบละเอียด
หากเกิดข้อผิดพลาด 413 payload too large เราสามารถตรวจสอบสาเหตุของข้อผิดพลาดได้ดังนี้
- ตรวจสอบว่าขนาดของ payload ถูกต้องหรือไม่
ขนาดของ payload จะต้องไม่เกินที่ server อนุญาต
เราสามารถตรวจสอบขนาดของ payload ได้โดยตรวจสอบ headers ของ HTTP request
- ตรวจสอบว่า server อนุญาตขนาดของ payload นั้นหรือไม่
นอกจาก route แล้ว server เองก็อาจกำหนดว่าขนาดของ payload ใดบ้างที่อนุญาตให้ใช้กับทรัพยากรนั้น
เราสามารถตรวจสอบว่า server อนุญาตขนาดของ payload นั้นหรือไม่ได้โดยตรวจสอบ configuration ของ server
หากตรวจสอบแล้วพบว่าขนาดของ payload เกินกว่าที่ server อนุญาต เราสามารถแก้ไข HTTP request หรือ server ให้ถูกต้องได้ตามต้องการ
วิธีป้องกัน 413 payload too large
เพื่อป้องกันไม่ให้เกิดข้อผิดพลาด 413 payload too large เราสามารถตรวจสอบขนาดของ payload ก่อนส่งไปยัง server ได้ดังนี้
// ตรวจสอบขนาดของ payload
const file = new File([‘my-file.txt’], ‘my-file.txt’);
const size = file.size;
// หากขนาดของ payload เกินกว่าที่ server อนุญาต ให้แสดงข้อความแจ้ง
if (size > 1000000) {
alert(‘File is too large.’);
return;
}
// ส่ง HTTP request
const request = new XMLHttpRequest();
request.open(‘POST’, ‘/users’);
request.setRequestHeader(‘Content-Type’, ‘multipart/form-data’);
request.send(file);
วิธีนี้จะช่วยให้เราตรวจสอบและป้องกันไม่ให้เกิดการผิดพลาดได้