การทำ CORS บน WCF เพื่อแก้ปัญหา Cross Domain Origin

ก่อนที่เราจะเข้าสู่ยุค Web API และ RESTful Web Service ในทุกวันนี้ ทาง Microsoft ได้เตรียมเครื่องมือในการพัฒนามากกว่า ASP.NET Web API นั่นคือ WCF (Windows Communication Foundation) ให้ใช้งาน

ซึ่งหนึ่งในโจทย์ที่ท้าทายอันหนึ่งในการใช้ WCF คือการทำให้ JavaScript จาก Domain อื่นๆ สามารถเรียกใช้งานได้ (เช่นเว็บลูกข่ายของเรา เรียกไปที่เว็บกลาง หรือการพัฒนา Mobile App แบบ Cross Platform โดยใช้ PhoneGap หรือ Ionic) ซึ่งมักติดปัญหา Cross Domain Origin กัน

จากที่พลได้ไปจัดอบรม รวมถึงเป็นที่ปรึกษาหลายบริษัทที่เดิมทีใช้เทคโนโลยีฝั่ง .NET อย่าง WCF พัฒนา Web Service ให้ลูกค้าบ่อยๆ จึงคิดว่าน่าจะเป็นประโยชน์ที่จะเอาวิธีทำ CORS ที่ใช้ประจำมาแชร์ไว้ที่นี่ เพื่อเป็นประโยชน์กับนักพัฒนาสาย .NET กันเนอะ

1. สร้าง Class Message Inspector

ในที่นี้เราจะเริ่มต้นด้วยการสร้าง Class ใหม่ขึ้นมาในระบบ

public class CustomHeaderMessageInspector : IDispatchMessageInspector
{
   Dictionary<string, string> requiredHeaders;

   public CustomHeaderMessageInspector (Dictionary<string, string> headers)
   {
       requiredHeaders = headers ?? new Dictionary<string, string>();
   }

   public object AfterReceiveRequest(ref System.ServiceModel.Channels.Message request, System.ServiceModel.IClientChannel channel, System.ServiceModel.InstanceContext instanceContext)
   {
       return null;
   }

   public void BeforeSendReply(ref System.ServiceModel.Channels.Message reply, object correlationState)
   {
       var httpHeader = reply.Properties["httpResponse"] as HttpResponseMessageProperty;
       
       foreach (var item in requiredHeaders)
       {
          httpHeader.Headers.Add(item.Key, item.Value);
       }           
    }
}

2. สร้าง Endpoint Behavior

จากนั้นเราจะสร้าง Endpoint behavior ขึ้นมาใหม่อีกคลาสหนึ่งโดยให้ extend คลาสที่ชื่อ BehaviorExtensionElement และ implement Interface ที่ชื่อ IEndpointBehavior

** อย่าลืมว่า Namespace ของ Class Endpoint Behavior ตัวนี้ เป็นส่วนที่ต้องกำหนดให้ดี เพราะเราจะต้องระบุให้ถูกต้องหลังจากขั้นตอนที่ 3

 public class EnableCrossOriginResourceSharingBehavior : BehaviorExtensionElement, IEndpointBehavior
            {
                public void AddBindingParameters(ServiceEndpoint endpoint, System.ServiceModel.Channels.BindingParameterCollection bindingParameters)
                {
           
                }

                public void ApplyClientBehavior(ServiceEndpoint endpoint, System.ServiceModel.Dispatcher.ClientRuntime clientRuntime)
                {
            
                }

                public void ApplyDispatchBehavior(ServiceEndpoint endpoint, System.ServiceModel.Dispatcher.EndpointDispatcher endpointDispatcher)
                {
                    var requiredHeaders = new Dictionary<string, string>();

                    requiredHeaders.Add("Access-Control-Allow-Origin", "*");
                    requiredHeaders.Add("Access-Control-Request-Method", "POST,GET,PUT,DELETE,OPTIONS");
                    requiredHeaders.Add("Access-Control-Allow-Headers", "X-Requested-With,Content-Type");

                    endpointDispatcher.DispatchRuntime.MessageInspectors.Add(new CustomHeaderMessageInspector(requiredHeaders));
                }

                public void Validate(ServiceEndpoint endpoint)
                {
            
                }

                public override Type BehaviorType
                {
                    get { return typeof(EnableCrossOriginResourceSharingBehavior); }
                }

                protected override object CreateBehavior()
                {
                    return new EnableCrossOriginResourceSharingBehavior();
                }
            }

3. เพิ่ม Behavior ที่เราสร้างในไฟล์ web.config

พอเราสร้างคลาส Endpoint Behavior ที่กำหนดเสร็จแล้ว ก็ให้เพิ่มเข้าไปในไฟล์ web.config ที่อยู่ในโปรเจค

<extensions>
    <behaviorExtensions>        
       <add name="crossOriginResourceSharingBehavior" type="Services.Behaviours.EnableCrossOriginResourceSharingBehavior, Services, Version=1.0.0.0, Culture=neutral" />        
    </behaviorExtensions>      
</extensions>

โดย <extensions>  นี้ เพิ่มเข้าไปในส่วนของ <system.serviceModel>  ในระดับเดียวกับ <services>  และ <behaviors>  เช่น

<system.serviceModel>
   <services>
   </services>
   <behaviors>
   <behaviors>
   <extensions>
     ...
   </extensions>
</system.serviceModel>

4. นำ Behavior ไปใช้ใน Endpoint

<endpointBehaviors>      
   <behavior name="jsonBehavior">
      <webHttp />
      <crossOriginResourceSharingBehavior />
   </behavior>
</endpointBehaviors>

5. กำหนด Endpoint ให้ตรงกับความต้องการ

<endpoint address="api" binding="webHttpBinding" behaviorConfiguration="jsonBehavior" contract="Service.IServiceContract" />

การอบรม และเรียนรู้เพิ่มเติม

โดยปกติคอร์สเรียนสร้าง Mobile Application แบบ Cross Platform ด้วย Angular 2  และ Ionic (ทั้งออนไลน์ และออฟไลน์) ของพลนั้นออกแบบมาสำหรับคนทำเว็บทั่วไปนะ

แต่ในหลายๆ ครั้ง ทีมนักพัฒนาของพวกเรามาจากสาย .NET (ส่วนใหญ่เป็นองค์กรใหญ่ ไม่ก็โรงงานแถวนิคม) ซึ่งจะมีพื้นฐานการเขียนโปรแกรมต่างจากการทำเว็บธรรมดา ซึ่งพลก็สามารถให้บริการปรับเนื้อหาให้ตรงพื้นฐานของเดิมมากขึ้น จะสามารถเรียนรู้การใช้งานได้เร็ว และมีประสิทธิภาพ

ไม่ว่าจะสนใจจัดอบรมการทำ Mobile App ด้วย Angular 2 และ Ionic 2 หรือ Xamarin โทรติดต่อ 083-071-3373 มาคุยรายละเอียดกันก่อนได้เลย

อ้างอิง

• Enable-CORS
• How to add Behavior to client endpoint – StackOverflow
• ภาพต้นฉบับโดย Canned Muffins