วันจันทร์ที่ 8 กันยายน พ.ศ. 2557

ทำให้ Web API รับ การ Cross-Domain Requests จาก Ajax ได้

Web API คือไร ?

เอาง่ายๆ เลยนะ แล้วไว้มีเวลาจะมาเขียน เรื่อง WebAPI แบบละเอียดอีกที

สรุป WebAPI คือ เราเอาไว้ทำ ในการ รับ Request จาก client

โดยในงานนี้ เราจะใช้ Json ในการรับส่งข้อมูลกัน

โดยตามทั่วไปถ้าเราจะรับ-ส่ง request เราจะใช้ ajax ในการรับส่ง
ตัวอย่าง code ดังนี้


var mydata= {

"data": {

"width": "1366",

"heigth": "768",

"map_id": "No",

"DB": "LinkFreeDB"

}

};


$.ajax({

type: "POST",

data: JSON.stringify(mydata),

url: xxx, // แก้เป็น url ของเรา

success: function (data) {

console.log('OK');

}

});

ถ้าภายใน Domain เดียวกัน ก้อจะไมมี ปัญหา แต่ถ้าต่าง Domain ก้อจะเกิด error

ต่าง Domain คือ ?

เช่น           http://www.send.com/sendViaAjax.aspx
request ไปยัง  http://www.receive.com/DoSomeThing/

เนื่องจาก domain ข้างหน้าไม่เหมือนกัน จึงเกิด error

วิธีแก้ คือ

1.เข้าไป Nuget Downlao package ชื่อว่า  Microsoft.AspNet.WebApi.Cors
2. เปิด file ใน App_Start/WebApiConfig.cs. เพิ่ม code ใน WebApiConfig.Register method
 config.EnableCors();

3.เพิ่ม [EnableCors] attribute ใน class ที่ extend ApiController
ตัวอย่าง เช่น
[EnableCors(origins: "http://mywebclient.azurewebsites.net"

, headers: "*", methods: "*")]
 
     
public class MyController : ApiController


4 ถ้าต้องการ รับทุกweb ที่ request มา ก้อให้กำหนดแบบนี้นะครับ
[EnableCors(origins: "*", headers: "*", methods: "*")]

5. กด F5 แล้วทดลองรัน ดูได้เลยครับ เป็นอันเสร็จพิธี ไปกินข้าวก่อนนะจ๊ะ ทุกคน บะบาย