ข้ามไปเนื้อหาหลัก

เจาะเบื้องหลังการแปลงทวีตเป็น PDF: อุปสรรค CORS และปัญหายูนิโค้ด

นักพัฒนาแชร์ประสบการณ์การสร้างเครื่องมือแปลงโพสต์ X หรือ Twitter ให้เป็นไฟล์ PDF พร้อมแก้ปัญหาจุกจิกทั้งเรื่อง CORS โทเค็น และฟอนต์ภาษา

เรียบเรียงโดย AI
Inewgen
06 Aug 2026ที่มา: Dev.to2 นาทีอ่าน (0 ครั้ง)อัปเดตล่าสุด 29 Aug 2026
แชร์
เจาะเบื้องหลังการแปลงทวีตเป็น PDF: อุปสรรค CORS และปัญหายูนิโค้ด

ภาพประกอบจากคลังภาพสต็อก ไม่ใช่ภาพจากเหตุการณ์จริง

ขนาดตัวอักษร
  • การดึงข้อมูลทวีตผ่านเบราว์เซอร์ตรงๆ ทำไม่ได้เนื่องจากติดนโยบาย CORS
  • ต้องใช้เซิร์ฟเวอร์เป็นตัวกลางในการดึงข้อมูลโดยอาศัยโทเค็นที่คำนวณจากไอดีทวีต
  • แก้ปัญหาฟอนต์ภาษาอื่นและอีโมจิใน PDF ด้วยการเรนเดอร์ผ่านแคนวาสของเบราว์เซอร์
  • ยอดการมีส่วนร่วมจะแสดงเฉพาะไลก์และรีพลายตามข้อมูลจริงจากเอนด์พอยต์

การสร้างเครื่องมือชิ้นหนึ่งเพื่อแปลงลิงก์โพสต์จากแพลตฟอร์ม X หรือ Twitter ให้กลายเป็นไฟล์ PDF ที่สะอาดตา ครบถ้วนทั้งข้อความ ชื่อผู้เขียน และรูปภาพ โดยไม่ต้องใช้วิธีจับภาพหน้าจอหลายภาพมาต่อกัน ดูเหมือนจะเป็นโปรเจกต์ที่ใช้เวลาทำเพียงแค่บ่ายเดียว ทว่าในความเป็นจริงกลับเต็มไปด้วยอุปสรรคทางเทคนิคที่ท้าทายความสามารถไม่น้อย

ความพยายามแรกสุดคือการดึงข้อมูลทวีตผ่านเอนด์พอยต์ syndication ซึ่งวิดเจ็ตฝังตัวของ X ใช้เอง ทว่ากลับติดปัญหาหัวข้อ Access-Control-Allow-Origin ที่อนุญาตเฉพาะโดเมนของ X เท่านั้น ทำให้เบราว์เซอร์บล็อกการเรียกใช้งานผ่าน CORS ทันที ส่วนเอนด์พอยต์บทสนทนารุ่นเก่าก็ส่งค่าว่างกลับมา ขณะที่ API ทางการก็ต้องใช้คีย์แบบมีค่าใช้จ่าย

ทางออกที่ใช้งานได้จริงจึงต้องพึ่งพาเซิร์ฟเวอร์ เนื่องจากกฎ CORS มีผลเฉพาะกับเบราว์เซอร์เท่านั้น ฝั่งเซิร์ฟเวอร์จึงทำหน้าที่รับคำขอจากเบราว์เซอร์แล้วส่งต่อไปยัง X โดยใช้สแตก WordPress และสร้าง REST เอนด์พอยต์ขนาดเล็กขึ้นมาจัดการ

นโยบาย Cross-Origin Resource Sharing หรือ CORS เป็นกลไกความปลอดภัยบนเว็บเบราว์เซอร์ที่สำคัญมากในการป้องกันไม่ให้เว็บไซต์หนึ่งแอบดึงข้อมูลจากอีกเว็บไซต์โดยไม่ได้รับอนุญาต การที่นักพัฒนาต้องดึงผ่านเซิร์ฟเวอร์จึงเป็นทางออกคลาสสิกที่เรียกว่า Backend Proxy เพื่อหลีกเลี่ยงข้อจำกัดนี้

เอนด์พอยต์ดังกล่าวจำเป็นต้องมีพารามิเตอร์เคียวรีโทเค็น ซึ่งไม่ใช่คีย์ API แต่เป็นค่าที่ประมวลผลมาจากไอดีทวีต โดยใช้สูตรคำนวณที่ถอดแบบมาจากโค้ดฝังตัวของ X เอง ซึ่งช่วยให้ระบบสามารถดึงข้อมูลเนื้อหาออกมาได้สำเร็จ

ไม่อยากพลาดข่าวใหม่?

สมัครรับสรุปข่าวสารใหม่ทางอีเมล ไม่บ่อยจนรำคาญ

โฆษณา

programming code editor interface dark mode

ภาพประกอบจากคลังภาพสต็อก ไม่ใช่ภาพจากเหตุการณ์จริง

อุปสรรคชิ้นใหญ่ต่อมาคือการจัดการกับรูปภาพและฟอนต์ โดยการแก้ปัญหาภาพข้ามโดเมนที่ดีที่สุดคือให้เซิร์ฟเวอร์ดึงไบต์ของรูปภาพแล้วแปลงเป็นดาต้า URL แบบ base64 เพื่อตัดปัญหา CORS ให้หมดไป

ในส่วนของการสร้างไฟล์ PDF ด้วยไลบรารี jsPDF นั้นพบปัญหาหนักกับตัวอักษรนอกเหนือจากกลุ่มภาษาละติน-1 เช่น ภาษาฮินดี ภาษาอาหรับ ตัวอักษร CJK หรืออีโมจิ ซึ่งจะแสดงผลเป็นกล่องสี่เหลี่ยมหรือตัวอักษรที่พังทลาย วิธีแก้ที่ได้ผลจริงคือการใช้แคนวาสของเบราว์เซอร์ในการเรนเดอร์ข้อความที่มีระบบฟอนต์รองรับทุกภาษาอยู่แล้ว ก่อนจะแปลงเป็นภาพความละเอียดสูงแปะลงใน PDF

สำหรับข้อมูลสถิติการมีส่วนร่วม เอนด์พอยต์สาธารณะจะส่งค่าไลก์และจำนวนบทสนทนากลับมา แต่ไม่มีข้อมูลรีโพสต์หรือยอดการมองเห็น ทางผู้พัฒนาจึงเลือกแสดงเฉพาะเมตริกที่มีอยู่จริงเพื่อความโปร่งใส แทนที่จะแสดงตัวเลขปลอมหรือขีดว่าง

ที่มา: Dev.to

ความคิดเห็น

แสดงความคิดเห็น
0/2000

พบข้อมูลผิดพลาดในบทความนี้? แจ้งปัญหาบทความนี้