Web API: Enable CORS with Custom ActionFilter

พอดีได้ลองตอบคำถามใน GF เกี่ยวกับ CORS ของ WEB API โดยไม่ต้อง add MVC Lib เข้ามาด้วยปรากฎว่ายุ่งยากกว่าที่คิด เพราะตัว package ของ MS ที่ให้มาไปเรียกใช้เองซะงั้น

ก็สงสัยแค่ add header ใน response ตัวเดียวทำไมวุ่นวายนัก เลยแนะนำอีกวิธี

เราก็ทำ custom action filter ขึ้นมาเองซะเลย  แล้วก็เพิ่มเติม host address ได้อีกในตอนหลัง

แต่ก็มีอีกวิธีคือเพิ่มใน web.config/ system.webServer>httpProtocol>customHeaders ผู้เขียนคิดว่าไม่ค่อยเหมาะเท่าไหร่ เพราะ asp.net รุ่นใหม่ๆพยายามลด internal tag ลง

PROBLEM

เนื่องจาก WEB BROWSER ทุกตัวจะมี POLICY ในการป้องกันไม่ให้ domain อื่นส่ง AJAX Request เข้ามายัง DOMAIN ของ Website ที่เปิดใช้งานอยู่

วิธีแก้คือต้องให้ DOMAIN ที่เป็นผู้รับ Request ทำการส่ง Header มาบอก WEB BROWSER ว่าอนุญาตให้ DOMAIN นั้นๆ สามารถส่ง Ajax Request มาได้

XMLHttpRequest cannot load http://localhost:56153/api/default. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:63343’ is therefore not allowed access.

 

DEVELOP

เริ่มต้นก็สร้าง web api project ขึ้นมาก่อน

2015-03-29_192252

จากนั้นสร้าง apicontroller  ขึ้นมาใช้ทดสอบ

 

ต่อมาก็ไปสร้าง Filter ไว้สำหรับเพิ่ม Domain URL  ลง response header

เพื่อบอก Web Browser ให้อนุญาตให้ script จากโดเมนนั้นทำ ajax request มาที่เว็บไซต์ของเรา

โดยผู้เขียนจะให้ไปอ่านค่าจาก appSetting มาใส่ ตัวอย่าง  http://localhost:63343 เป็นต้น ถ้ามีหลาย URL ก็ใส่  comma ตามหลังติดๆกัน  *หรือลองเขียนเพิ่มเติมให้ไปเก็บใน DB ก็ได้

NOTE: ยังมี Access-Control-Allow-Method, Access-Control-Allow-Header, Access-Control-Allow-Max-Age  และ Access-Control-Allow-Credentials หากไม่เพียงพอก็ใส่เพิ่มเข้าไปใน header ได้อีก

 

จากนั้นเอาไปใช้งานใน App_Start -> WebApiConfig.cs

กด F5 เพื่อ RUN ตัวอย่าง ก็จะได้ URL Address นี้สำหรับ WEB API

http://localhost:56153

2015-03-29_200004

 

TESTING

ทดลองยิงด้วย PostMan เพื่อดู allow domain ที่เพิ่มไว้

2015-03-29_200846

ต่อมาสร้าง script ที่ call มาจาก URL Address อื่น

เอาไป host ที่ website อีก address ที่ allow ไว้ แล้วลองเรียกดู จะเห็นว่า script ทำงานได้

ลองไปดู ajax get reqeust ข้างในจะเห็นว่ามีชื่อ domain ของ page นี้ที่ allow ให้ script ทำงานได้

 

2015-03-29_201610

 

FINALLY

บางครั้งเราก็สามารถเลือกที่จะใช้ หรือพัฒนาส่วนขยายขึ้นมาใช้งานเองได้ เพียงแค่มีความเข้าใจพื้นฐานเกี่ยวกับการทำงานของแต่ละส่วน เราก็สามารถแก้ปัญหาได้เองเบื้องต้น 😀

 

 


 

 

(Visited 598 times, 1 visits today)

Leave a Reply