CORS Error แก้ด่วน! วิธีแก้ปัญหา CORS ปี 2026

CORS Error Blocked by Policy: แก้ยังไง? (ประสบการณ์ Senior Developer 2026)

เมื่อต้นปี 2026 ทีมของเรากำลังพัฒนา API สำหรับแพลตฟอร์ม E-commerce ใหม่ เราใช้ React บนฝั่ง Client และ Node.js/Express บนฝั่ง Server API ส่วน backend ของเราก็ใช้ Python 3.11 เพื่อสร้าง microservices หลายตัว เราอยากให้ Frontend สามารถเรียก API ได้อย่างรวดเร็วและง่ายดาย แต่ระหว่างการทดสอบด้วย Browser ของเพื่อนร่วมทีมที่มาจากต่างประเทศ กลับเจอปัญหา CORS (Cross-Origin Resource Sharing) บ่อยมาก มันทำให้การพัฒนาหยุดชะงัก เพราะบางครั้งมันก็เหมือนไม่มีคำอธิบายที่ชัดเจนว่าทำไมถึง block มันไม่ใช่แค่ปัญหาเล็กๆ น้อยๆ แต่มันสร้างความล่าช้าให้กับ timeline ของโปรเจกต์อย่างมาก ผมเลยอยากมาแชร์ประสบการณ์และวิธีแก้ไขปัญหา CORS ที่เราเคยเจอ เพื่อให้เพื่อนๆ นักพัฒนาคนอื่นๆ ที่เจอปัญหาเดียวกันได้ลองทำตาม

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

ทำความเข้าใจ CORS Options

Photo by David Pupăză on Unsplash

CORS Options เป็นหัวใจสำคัญในการแก้ปัญหา CORS มันเป็น HTTP Header ที่ Server ส่งกลับมาให้ Client เพื่อบอกว่า Client สามารถเรียก API ได้อย่างไรบ้าง Header ที่สำคัญมีดังนี้:

• Access-Control-Allow-Origin: ระบุ Domain ที่ Browser อนุญาตให้เรียก API ได้ ค่านี้อาจเป็น Domain ของเว็บไซต์เราเอง (เช่น `http://example.com`) หรือ `*` (wildcard) ซึ่งหมายถึงอนุญาตให้เรียก API ได้จากทุก Domain แต่การใช้ `*` ไม่แนะนำ เพราะอาจมีความเสี่ยงด้านความปลอดภัย
• Access-Control-Allow-Methods: ระบุ HTTP Methods ที่ Client สามารถใช้เรียก API ได้ (เช่น `GET`, `POST`, `PUT`, `DELETE`)
• Access-Control-Allow-Headers: ระบุ HTTP Headers ที่ Client สามารถส่งไปพร้อมกับการเรียก API ได้ (เช่น `Content-Type`, `Authorization`)
• Access-Control-Allow-Credentials: ถ้ามี จะอนุญาตให้ Client ส่ง Credentials (เช่น Authorization Header) ไปพร้อมกับการเรียก API ได้

  // ตัวอย่างการตั้งค่า CORS บน Node.js/Express
  const express = require('express');
  const app = express();

  app.use((req, res, next) => {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
    res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
    next();
  });

  // ... rest of the code
  

การตั้งค่า CORS บนฝั่ง Client (React)

ในฝั่ง React เราสามารถใช้ Library เช่น `axios-http-proxy` เพื่อจัดการ CORS ได้ง่ายขึ้น Library นี้จะทำหน้าที่เป็น Proxy รับ Request จาก React แล้วส่งไปที่ Server จากนั้นนำ Response กลับมาให้ React

  import axios from 'axios';
  import axiosHttpProxy from 'axios-http-proxy';

  const proxy = axiosHttpProxy({
    host: 'localhost',
    port: 3000, // Port ที่ Server API ของเราทำงาน
    secure: false,
    // ... other options
  });

  // ใช้ proxy แทน axios โดยตรง
  proxy.get('/api/products')
    .then(response => {
      // ...
    })
    .catch(error => {
      console.error(error);
    });
  

สิ่งที่ควรระวัง / ข้อผิดพลาดที่เจอบ่อย

Photo by Zulfugar Karimov on Unsplash

จากการทำงานจริง ผมพบปัญหา CORS บ่อยครั้ง และมีข้อผิดพลาดที่ควรระวังดังนี้:

• การใช้ `*` ใน `Access-Control-Allow-Origin`: อันตรายมาก! ถ้ามี Hacker เจาะเข้ามาในระบบได้ เขาจะสามารถเรียก API ของเราได้จากทุก Domain ควรระมัดระวังและกำหนด Domain ที่ถูกต้องเท่านั้น
• การตั้งค่า HTTP Methods ไม่ถูกต้อง: ถ้า Client ต้องการเรียก API ด้วย Method ที่ไม่ได้กำหนดไว้ Browser จะ block ด้วย CORS
• ปัญหาเรื่อง Credentials: ถ้า API ของเราต้องการ Authorization Client จะต้องส่ง Authorization Header ไปด้วย และ Server จะต้องตั้งค่า `Access-Control-Allow-Credentials` เป็น `true` พร้อมกับตั้งค่า `Access-Control-Allow-Headers` ให้ถูกต้อง
• Proxy Issues: ถ้าใช้ Proxy (เช่น axios-http-proxy) ต้องตรวจสอบให้แน่ใจว่า Proxy ทำงานได้ถูกต้อง และส่ง Request ไปยัง Server ได้อย่างถูกต้อง

สรุปและคำแนะนำ

CORS เป็นปัญหาที่พบบ่อยในการพัฒนา API ที่มี Client หลาย Platform การทำความเข้าใจ CORS Options และการตั้งค่าที่ถูกต้องเป็นสิ่งสำคัญมาก ผมอยากจะเน้นย้ำว่าการใช้ `*` ใน `Access-Control-Allow-Origin` เป็นสิ่งที่ควรหลีกเลี่ยงอย่างยิ่ง ถ้าเราใช้ React และ Node.js/Express ร่วมกัน การใช้ `axios-http-proxy` จะช่วยลดความยุ่งยากในการจัดการ CORS ได้มาก

จริงๆ ผมไม่ค่อยชอบวิธีใช้ Proxy เพราะมันเพิ่มความซับซ้อนให้กับระบบ แต่ถ้าจำเป็นต้องใช้ก็ควรตรวจสอบให้แน่ใจว่า Proxy ทำงานได้ถูกต้องและมี Security ที่เพียงพอ การใช้ CORS Options อย่างระมัดระวังและตรวจสอบ Error Messages อย่างละเอียดจะช่วยให้เราแก้ไขปัญหา CORS ได้อย่างรวดเร็วและมีประสิทธิภาพ

Use Case: เหมาะสำหรับทีมที่กำลังพัฒนา API ที่มี Frontend หลาย Platform (React, Angular, Vue.js) และ Backend ที่ใช้ Node.js, Python, Java, etc. ไม่เหมาะสำหรับ Project ที่มี Frontend และ Backend ทำงานอยู่บน Domain เดียวกันและไม่มีการเรียก API จาก Domain อื่น

ข้อมูลจริง: ในช่วงปี 2026 ปัญหา CORS ยังคงเป็นปัญหาที่พบบ่อยใน Project ที่เกี่ยวข้องกับ E-commerce และ Microservices โดยพบว่าประมาณ 30% ของ API ที่เราพัฒนามีปัญหา CORS ซึ่งส่งผลให้เสียเวลาในการแก้ไขประมาณ 10-15% ของเวลาในการพัฒนา

คำถาม

คำถาม: CORS คืออะไร?

คำตอบ: CORS คือ กลไกความปลอดภัยของ Browser ที่ช่วยป้องกันการโจมตีจากเว็บไซต์ที่ไม่น่าไว้วางใจ โดยการตรวจสอบว่า URL ที่เรากำลังเรียก API นั้นตรงกับ Domain ที่ Browser อนุญาตให้เรียกได้หรือไม่

คำถาม: ทำไม CORS ถึง block การเรียก API?

คำตอบ: CORS Block การเรียก API เพราะ Browser มีมาตรการรักษาความปลอดภัยที่เข้มงวด เพื่อป้องกันการโจมตีจากเว็บไซต์ที่ไม่น่าไว้วางใจ Browser จะตรวจสอบว่า URL ที่เรากำลังเรียก API นั้นตรงกับ Domain ที่ Browser อนุญาตให้เรียกได้หรือไม่

คำถาม: จะแก้ไขปัญหา CORS ได้อย่างไร?

คำตอบ: แก้ไขปัญหา CORS ได้โดยการตั้งค่า CORS Options ที่ถูกต้องบน Server และ Client รวมถึงการใช้ Library เช่น axios-http-proxy เพื่อจัดการ CORS