ปัญหาน่าปวดหัวของ No ‘Access-Control-Allow-Origin’

Access to XMLHttpRequest at ‘http://localhost:4000/test1' from origin ‘http://localhost:8080' has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

ปัญหานี้แก้ง่ายมากเลยครับถ้าใครใช้ chrome เพิ่มส่วนขยายซักตัวเข้าไปกดเปิดก็ใช้ได้เลยครับ

Chrome Web Store

สำหรับผมใช้ Moesif CORS

กดเปิดก็เรียบร้อยครับ

และถ้า Client ที่ไม่ได้ลง หรือ ไม่มี Chrome จะทำอย่างไร

ถ้าคุณใช้ PHP, NodeJS, Python ไม่น่ามีปัญนี้นะครับเพราะพวกนี้เปรียบเสมือนเป็น server ที่พยายามเรียก server

แต่ถ้าใช้ Javascript หรือ Vue ก็น่าจะพบ เพราะพวกนี้เหมือน client ที่พยายามเรียก server ที่ไม่อนุญาติให้ client อื่นเรียกใช้

วิธีแก้ก็คือแก้ที่ตัว server เลยครับ

ถ้าเป็น php เพิ่มส่วนนี้ลงไป

<?php 
header('Access-Control-Allow-Origin: *');
?>

ถ้าเป็น Apache แก้ไฟล์ .htaccess

<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
</IfModule>

ถ้าเป็น Nginx แก้ไฟล์ nginx.conf

server {
    ...

    location / {
        proxy_pass   http://127.0.0.1:8080;
        add_header   Access-Control-Allow-Origin *;
    }   
}

ถ้าเป็น NodeJS

router.get('/', function(req, res) {
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE'); // If needed
    res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');
    res.setHeader('Access-Control-Allow-Credentials', true); 
});

สรุป

ถ้าคุณเขียนเว็บ client ที่พยายามจะเรียกเว็บ server ที่มันข้าม domain กันก็จะทำให้เกิดปัญหา Access-Control-Allow-Origin วิธีแก้ง่ายๆคือ เพิ่มส่วนขยายให้กับ chrome ด้วย Moesif CORS หรือแก้ไขตัว server ตามภาษาต่างๆที่พูดมา หากคุณไม่ได้เป็นเจ้าของ server นั้นก็แสดงว่าเขาไม่ได้อยากให้คนนอกใช้ จบครับ