เรียก Ajax ข้าม Site แล้ว Error : Access-Control-Allow-Origin

เรื่องนี้ผมเคยคิดอยากที่จะเขียนหลายครั้งแล้วแต่ผมจะเริ่มทีไรผมก็ลืม พอดีวันนี้มีแฟนเพจได้ส่ง Message เข้ามาถามผมๆ ก็เลยตัดสินใจเขียนเรื่องนี้กันเลยดีกว่า เริ่มแรกมันเกิดจากอะไร เริ่มแรกมันเกิดจากความต้องการของการที่เราต้องการที่จะเรียกใช้ Data ที่ Provide ไว้กันคนละ Host ยกตัวอย่างเช่น  เวพของผม คือ JavaScript แต่ผมเห็นว่ามี Data ที่น่าสนใจของเวพอื่นๆ ผมต้องการที่จะดึง Data เหล่านั่นมาใช้

http://www.javascriptthai.com/AppDesign/TemplateEngine/ApiService/DataApiSample.php   << Data ที่ Provide

Code ตัวอย่าง การเรียกใช้ งานข้อมูลต่าง Host ถ้า html เราถูกเรียก จาก  host   ที่ไม่ได้เป็น www.javascriptthai.com

 <script>
        $(document).ready(function () {

            var url = 'http://www.javascriptthai.com/AppDesign/TemplateEngine/ApiService/DataApiSample.php';

            $.ajax({
                url: url,
                complete: function (data) {
                    console.log(data);
                }
            });

        });
    </script>

มันจะแสดง Error ดังด้านล่าง

Access-Control-Allow-Origin

สาเหตุซึ่งมันน่าจะเป็นข้อกำหนดของตัว Ajax เองว่าไม่ให้สามารถทำการเรียก Data ข้าม Host ได้แต่ถ้า Host ต้องการจะเปิดให้ใครก็ตามเรียกใช้งาน Data ผ่าน Ajax ข้าม  Host ได้ก็สามารถทำได้ครับทำโดยลง Component ตามด้านล่างครับ

http://enable-cors.org/server.html

enable-cors

ซึ่่งมันรองรับหลายภาษา และจำเป็นที่จะต้องติดตั้ง component เพิ่มนิดหน่อยแต่เท่าที่ผมลองใช้ผมถูกใจอยู่ feature นึงและเชื่อว่าคงจะมีประโยชน์กับเพื่อนๆ ก็คือมันสามารถเปิดให้เฉพาะ Host ที่เราอนุญาติให้บาง ?Host เรียกใช้ได้ด้วย เช่น ผมอยากให้ www.sanook.com เรียก แต่ไม่อยากให้ www.kapook.com มันก็ทำได้ครับ อันนี้ผมว่ามีประโยชน์มากครับสำหรับผม แต่ถ้าจำเป็นต้องใช้หรือสนใจก็ไปศึกษากันเองนะครับ ถ้าหากว่ามี feature อะไรที่น่าใช้ก็แนะนำผมมาบ้างนะครับ

แต่ถ้าเราไม่ได้เป็นเจ้าของ Host เองแล้วเราอยากที่จะได้ Data จาก Site ชาวบ้านเขาเราจะทำยังไง หลักก็มีออยู่ว่าเราอาจเขียน Service บน  Host ของเราให้ไปเรียก Site ชาวบ้าน จากนั้นก็ เอา Ajax เรียก Service ที่เราทำขึ้นมาเองครับ

Service Defin core

แต่หากว่าขี้เกียจเหมือนผม  ผมก็มีทางเลือกให้ครับ ก็เรียกโดยใช้  https://cors-anywhere.herokuapp.com

    $(document).ready(function () {

            var url = 'https://cors-anywhere.herokuapp.com/http://www.javascriptthai.com/AppDesign/TemplateEngine/ApiService/DataApiSample.php';

            $.ajax({
                url: url,
                complete: function (data) {

                    var obj = JSON.parse(data.responseText);   //Cconvert Text เป็น Json ครับผม

                    console.log(data);
                }
            });

        });
    </script>

http://www.javascriptthai.com/AppDesign/TemplateEngine/ApiService/DataApiSample.php  << Site ที่เราต้องการ Call Data

หลักการก็เป็นตามด้านบนที่เขียนครับ  ว่า https://cors-anywhere.herokuapp.com เป็น Service ไปเรียก Data ต่อให้เราแต่ Data ที่ได้จะอยู่ในรูปแบบ Text เราก็แค่ Convert  JSON.parse ให้อยู่ในรูป Oject แค่นี้เราก็สามารถใช้งานได้แล้วครับผม

 

หวังว่าคงมีประโยชน์บ้างนะครับ