ปัญหาเรื่อง bug เมื่อวาง node project หลัง WAF Cloudflare

•  คือเราเขียน CRUD และ upload file ด้วย Node+Express nodejs 22.18 ที่ local
•  ทำงานได้ทุกฟังก์ชั่น ทดสอบผ่าน insert , update, delete รวมทั้ง upload file ได้ทุกไฟล์
• แต่พอ ย้ายขึ้น product ทำแบบ รัน container docker และ ใช้ nginx reverse proxy เข้าไป ตั้งพาธให้เรียบร้อย
• ปัญหาคือ อัพโหลดไฟล์ .webp บางไฟล์ไม่ได้ซะงั้น ได้ reponse status 403 forbidden error
• ทำให้ ajax รับ response ไม่สามารถ decode json ได้เพราะ response เป็น html error 403
• ทำให้ catch เมื่อเรียก .fetch().catch() 

Code ที่มีปัญหากับไฟล์ภาพบางไฟล์ เมื่อวางหลัง  WAF Cloudflare

function sendDataAjax() {

    // Prepare FormData

    const form = document.getElementById('insertForm');

    const formData = new FormData(form);

    fetch('<%=baseUrl%>/insertslide', {

        method: 'POST',

        body: formData

    })

    .then(async response => {

        const result = await response.json();

        if (result.success) {

            Swal.fire({

                icon: 'success',

                title: 'เพิ่มข้อมูลสำเร็จ'

            }).then(() => {

                window.location.reload();

            });

        } else {

            Swal.fire({

                icon: 'error',

                title: 'เกิดข้อผิดพลาด1',

                text: result.error || 'ไม่สามารถเพิ่มข้อมูลได้'

            });

        }

    })

    .catch((error) => {

        console.error("Fetch Error:", error); // พิมพ์ข้อผิดพลาดใน console เพื่อดีบั๊ก

   

        // แสดงข้อผิดพลาดที่เกิดขึ้นจริง

        let errorMessage = 'ไม่สามารถเชื่อมต่อกับเซิร์ฟเวอร์ได้';

       

        // พยายามดึงข้อความจาก Error Object ถ้ามี

        if (error && error.message) {

            errorMessage = `การเชื่อมต่อล้มเหลว: ${error.message}`;

        } else if (error) {

            errorMessage = String(error); // แปลง error object เป็น string

        }

        Swal.fire({

            icon: 'error',

            title: 'เกิดข้อผิดพลาด2',

            text: `ไม่สามารถเชื่อมต่อกับเซิร์ฟเวอร์ได้ ${error.message}`

        });

    });

}

Problem

• มันเข้า  .catch error.message ที่ครั้งที่  แนบไฟล์นี้ไปด้วย

SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON

Solved

• capture ภาพนั้นวางบน paint แล้ว save มันอันใหม่ แล้วอัพโหลดก็ใช้ได้ซะงั้น

เพิ่มเติม

• รู้สึกปัญหาประมาณนี้ เจอบ่อยๆ อยู่ระหว่าง process อื่นๆ ที่วางหลัง WAF cloudflare เค้าปลอดภัยจริงๆ
• ทดสอบสมมุติฐาน คือ ย้ายโปรเจคไปอีก domain ที่ไม่ได้อยู่หลัง WAF Cloudflare ผลคือ ใ่ช้งานได้ปกติตามคาด
• อีกเรื่องคือ plugin บางตัวใน CMS ยอดนิยม หน้าจัดการนะ แก้ไข post ให้แสดงจำนวนมาขึ้นและ มีการเรียงใหม่ DESC, ASC ประมาณนี้ ทั้งที่ทำผ่านหน้า GUI plugin นะ   ตอนกด save มันโดน cloudflare  block ซะงั้น วิธีแก้ต้องใช้วิชา network นิดหน่อย