如何設定Web API的 Cross Domain

某些情況Web API 需放在獨立的伺服器或不同的網域位置，當其他web應用程式要調用這web API時，就會發生無法讀取該網址(跨源問題)，所以需特別針對這隻Web API 做特別處理，讓它允許跨源存取。

用NutGet安裝  Microsoft.AspNet.WebApi.Cors

    開啟檔案App_Start/webApiConfig.cs ，並修改webApiConfig.Register 的函式

public static void Register(HttpConfiguration config)         {                      config.MapHttpAttributeRoutes();             config.EnableCors();   // 加上此行，就允許跨源存取             config.Routes.MapHttpRoute(                 name: "DefaultApi",                 routeTemplate: "api/{controller}/{id}",                 defaults: new                 {                     id = RouteParameter.Optional                 }             );         }

    在apiController 加上enable cros的設定

public class apiPatientController : ApiController     {         // GET api/<controller>          [EnableCors(                      origins: "http://localhost,http://localhost:19532",//設定允許哪些來源網址，允許存取此web API             headers: "accept,content-type,origin",             methods: "get,post")]         public IEnumerable<entityPatient> Get()         {             PublicInfo.CheckClientSide();             entityPatient tempPatient = new entityPatient();             return tempPatient.getAllPatients();         }     }

    在client端的網頁http://localhost:19532/HtmlPage1.html，呼叫web API，就能成功取回資料，Angular 取得跨源的web API，需事先設定useXDomain=true 

var app = angular.module("patientModule", []);     app.config(['$httpProvider', function ($httpProvider) {         $httpProvider.defaults.useXDomain = true;         delete $httpProvider.defaults.headers.common['X-Requested-With'];     }]);   app.controller("patientController", function ($scope, $http) {         $http.get('http://localhost:11586/api/apiPatient').success(function (data, status, header, config) {                        $scope.patients = data;         }).error(function (data, status, headers, config) {             alert("web api 網址失敗!");         })

文獻參考   http://www.asp.net/web-api/overview/security/enabling-cross-origin-requests-in-web-api#enable-cors