http.post WCF RESTful与Angularjs

Question

我试图找出如何使用http.post将数据发布到WCF服务，但似乎无法确切地知道如何执行此操作。我使用的POST方法和我使用GET方法的方法相同。如果我的方法在添加数据时出错，那么任何文章都会有所帮助。

的Javascript

.controller('CheckCtrl', function($scope, $http) {

 $scope.insertdata = function() {
   $http.post("localhost:15021/Service1.svc/method", {'M1':$scope.M1, 'M2':$scope.M2,'M3':$scope.M3,'M4':$scope.M4,'M5':$scope.M5,'M6':$scope.M6,'M7':$scope.M7,'M8':$scope.M8,'M9':$scope.M9,'M10':$scope.M10,})
   .success(function(data)
     {
       console.log("data inserted successfully")
     })
     .error(function(data)
       {
         console.log("Error")
       })
 }

HTML

<label class="item item-input" ng-model="M1">
                <input type="text" placeholder="Make"></input>
            </label>
            <label class="item item-input" ng-model="M2">
                <input type="text" placeholder="Model"></input>
            </label>
             <label class="item item-input" ng-model="M3">
                <input type="text" placeholder="Supplier"></input>
            </label>
            <label class="item item-input" ng-model="M4">
                <input type="text" placeholder="Time in"></input>
            </label>
             <label class="item item-input" ng-model="M5">
                <input type="text" placeholder="Date"></input>
            </label>
             <label class="item item-input" ng-model="M6">
                <input type="text" placeholder="RTB No"></input>
            </label>
            <label class="item item-input" ng-model="M7">
                <input type="text" placeholder="Keys"></input>
            </label>
             <label class="item item-input" ng-model="M8">
                <input type="text" placeholder="Job No"></input>
            </label>
            <label class="item item-input" ng-model="M9">
                <input type="text" placeholder="Reg No">
            </label>
            <label class="item item-input" ng-model="M10">
                <input type="text" placeholder="Chassis or Vin Number" ng-model="M1">
            </label>    

        <ion-item class="item-balanced" href="#/app/checklist" value="submit"                                 ng-click="insertdata()">
                    Next
         </ion-item> 

如果我使用此编码，我会遇到这些错误：

XMLHttpRequest cannot load localhost:15021/Service1.svc/method. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource

和

Error: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'localhost:15021/Service1.svc/method'.

WCF服务Service1.svc.cs：

 public List<wsAddTD> TruckDetails()
        {
            NorthwindDataContext dc = new NorthwindDataContext();
            List<wsAddTD> results = new List<wsAddTD>();

            foreach (tblTruckDetail tc in dc.tblTruckDetails)
            {
                results.Add(new wsAddTD()
                {
                    TCID = tc.ID,
                    Make = tc.MAKE,
                    Model = tc.MODEL,
                    Supplier = tc.SUPPLIER,
                    Timein = tc.TIMEIN,
                    Date = tc.DATE,
                    Rtbnum = tc.RTB_NUM,
                    Keys = tc.KEYS,
                    Jobnum = tc.JOB_NUM,
                    Regnum = tc.REG_NUM,
                    Vinnum = tc.VIN_NUM,
                    Tyremake = tc.TYRE_MAKE,
                    Tyrequantity = tc.TYRE_QUANTITY,
                    Bullbar = tc.BULLBAR,
                    Bodycheck = tc.BODYCHECK,
                    Neworrepair = tc.NEWORREPAIR,
                    FK_Truckid = tc.FK_TRUCKDID
                });

            }
            return results;
        }

IService1.cs：

 [OperationContract]
        [WebInvoke(Method = "POST", ResponseFormat = WebMessageFormat.Json, BodyStyle = WebMessageBodyStyle.Wrapped, UriTemplate = "truckDetails")]
        List<wsAddTD> TruckDetails();

我确实为CORS添加了标题：

<httpProtocol>
      <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*"/>
        <add name="Access-Control-Allow-Headers" value="Content-Type, Accept"/>
      </customHeaders>
    </httpProtocol>