จะแก้ CORS ยังไง เมื่อ Client ติด CORS และ Server เป็น Private

สวัสดีครับทุกคน หากผ่านมาอ่านบทความนี้ เชื่อว่าทุกคนก็พอจะรู้วิธีแก้ CORS มาบ้างแล้ว ก็จะขอเข้าสู่ case เนื้อหาเลยแล้วกัน

เริ่มกันเลย !!!

บทความเรื่อง CORS

Cross-Origin Resource Sharing (CORS) เป็นสิ่งที่ Web Developer ต้องควรรู้

ถ้าคุณติด CORS เราคือเพื่อนกัน

ในบททความนี้
Client จะใช้ React
Server จะใช้ Express

โดยปกติแล้วหาก Client ติด CORS เราก็จะให้ Server เป็นคนยิงแทน โดยเขียน Server ขึ้นมาสักตัว เพื่อเป็นตัวแทนในการยิง API Resources แล้วให้ Client เรียกใช้ข้อมูลจาก Server อีกที

แต่ถ้า Server เราเป็น Private ล่ะทำไงดี?

เมื่อ Server เป็น Private เราก็ไม่สามารถให้ Server เป็นตัวแทน ยิง API ได้แล้ว และด้วยทรัพยากรที่จำกัด เหลือทางออกเดียวก็คือให้ Client นั้นแหละเป็นคนยิง

แต่… เอ๊ะ หากให้ Clientมันก็ติด CORS อยู่ดีนี่!!!
เดี๋ยวฟังให้จบก่อนสิ !!!
มันก็มีวิธีอยู่นะ

วิธีที่ผมใช้
เอา Express มา Deploy React แล้วสร้าง route มาเพื่อยิง API แบบ Public

วิธี Express มา deploy react ด้านล่างนี้เลย

Deployment | Create React App

เริ่มโค้ดกัน
ขอยกตัวอย่าง Feature Download Image

npx create-react-app project //สร้าง project

copy ด้านล่างไปใส่ใน src/App.js

npm run start //start project

เปิด Browser ไปที่ http://localhost:300

คลิกขวา เลือก Inspect Element
แล้วกดปุ่ม Download File

Boom!!! ติด CORS

ทีนี้มาแก้ CORS โดยเอา Express มา Deploy React กัน
สร้าง server.js

ในตัวอย่าง route /file/download จะเป็นตัวแทนในการยิง API ให้กับเรา
line 8 path route /file/download แปลงเป็น body เป็น json
line 9-13 จะทำการยิง API เพื่อ get image จาก url แปลงเป็น base64 ให้เรา
line 15–17 path root route / จะทำการ render build ของ react

แก้โค้ด src/App.js

line 8 เซ็ท url ให้ยิงเข้าตัวเอง /file/download

npm run build //build project
node server.js //run project

เปิด Browser ไปที่ http://localhost:3000
คลิกขวา เลือก Inspect Element
แล้วกดปุ่ม Download File

จะเห็นว่าทางด้านล่างซ้าย ดาวน์โหลดรูปสำเร็จแล้ว
ไหนลองเปิดรูปดูสิ

สวยงาม!!!

Trirong Pholphimai / medium-cors

สรุป

จะแก้ CORS ยังไง เมื่อ Client ติด CORS และ Server เป็น Private
เราสามารถแก้ไขโดยการใช้ Express Deploy React ได้โดย
1. กำหนด path root route / ให้ render react
2. กำหนด route API เพื่อเป็นตัวแทนการยิง API

หวังว่าบทความนี้จะเป็นประโยชน์กับคนที่ติดปัญหาเรื่องนี้ ได้รู้วิธีการแก้ไขและสามารถนำไปปรับใช้ในชีวิตการทำงานได้นะครับ ^_^