Javascript 在使用Wcf服务的Angular JS中，飞行前响应中的访问控制允许方法不允许方法PUT

我正在从事Wcf服务。我在AngularJS应用程序中使用Wcf服务。我的Post、Delete和Put操作正在运行，但当我尝试更新记录时，我出现以下错误

无法加载XMLHttpRequest . 方法是 飞行前响应中的访问控制允许方法不允许

这是Wcf服务代码

   [ServiceContract]
    public interface IStudentService
    {

        [OperationContract]
        [WebInvoke(Method = "GET",
           RequestFormat = WebMessageFormat.Json,
           ResponseFormat = WebMessageFormat.Json,
           UriTemplate = "/GetAllStudent/")]
        List<StudentDataContract> GetAllStudent();

        [OperationContract]
        [WebGet(RequestFormat = WebMessageFormat.Json,
           ResponseFormat = WebMessageFormat.Json,
           UriTemplate = "/GetStudentDetails/{StudentId}")]
        StudentDataContract GetStudentDetails(string StudentId);

        [OperationContract]
        [WebInvoke(Method = "POST",
           RequestFormat = WebMessageFormat.Json,
           ResponseFormat = WebMessageFormat.Json,
           UriTemplate = "/AddNewStudent")]
        bool AddNewStudent(StudentDataContract student);

        [OperationContract]
        [WebInvoke(Method = "PUT",
           RequestFormat = WebMessageFormat.Json,
           ResponseFormat = WebMessageFormat.Json,
           UriTemplate = "/UpdateStudent")]
        void UpdateStudent(StudentDataContract contact);

        [OperationContract]
        [WebInvoke(Method = "DELETE",
           RequestFormat = WebMessageFormat.Json,
           ResponseFormat = WebMessageFormat.Json,
           UriTemplate = "DeleteStudent/{StudentId}")]
        void DeleteStudent(string StudentId);

    }

}

下面是一段JS代码

/// <reference path="../angular.min.js" />  
var app;

(function () {
    app = angular.module("RESTClientModule", []);

    app.controller("CRUD_AngularJs_RESTController", function ($scope, CRUD_AngularJs_RESTService) {

        $scope.OperType = 1;
        //1 Mean New Entry  

        GetAllRecords();
        //To Get All Records  
        function GetAllRecords() {
            var promiseGet = CRUD_AngularJs_RESTService.getAllStudent();
            promiseGet.then(function (pl) { $scope.Students = pl.data },
                function (errorPl) {
                    $log.error('Some Error in Getting Records.', errorPl);
                });
        }

        //To Clear all input controls.  
        function ClearModels() {
            $scope.OperType = 1;
            $scope.StudentID = "";
            $scope.Name = "";
            $scope.Email = "";
            $scope.Class = "";
            $scope.EnrollYear = "";
            $scope.City = "";
            $scope.Country = "";
        }

        //To Create new record and Edit an existing Record.  
        $scope.save = function () {
            var Student = {
                Name: $scope.Name,
                Email: $scope.Email,
                Class: $scope.Class,
                EnrollYear: $scope.EnrollYear,
                City: $scope.City,
                Country: $scope.Country
            };
            if ($scope.OperType === 1) {
                var promisePost = CRUD_AngularJs_RESTService.post(Student);
                promisePost.then(function (pl) {
                    $scope.StudentID = pl.data.StudentID;
                    GetAllRecords();

                    ClearModels();
                }, function (err) {
                    console.log("Some error Occured" + err);
                });
            } else {
                //Edit the record      
                debugger;
                Student.StudentID = $scope.StudentID;
                var promisePut = CRUD_AngularJs_RESTService.put($scope.StudentID, Student);
                promisePut.then(function (pl) {
                    $scope.Message = "Student Updated Successfuly";
                    GetAllRecords();
                    ClearModels();
                }, function (err) {
                    console.log("Some Error Occured." + err);
                });
            }
        };

        //To Get Student Detail on the Base of Student ID  
        $scope.get = function (Student) {
            var promiseGetSingle = CRUD_AngularJs_RESTService.get(Student.StudentID);
            promiseGetSingle.then(function (pl) {
                var res = pl.data;
                $scope.StudentID = res.StudentID;
                $scope.Name = res.Name;
                $scope.Email = res.Email;
                $scope.Class = res.Class;
                $scope.EnrollYear = res.EnrollYear;
                $scope.City = res.City;
                $scope.Country = res.Country;
                $scope.OperType = 0;
            },
                function (errorPl) {
                    console.log('Some Error in Getting Details', errorPl);
                });
        }

        //To Delete Record  
        $scope.delete = function (Student) {
            var promiseDelete = CRUD_AngularJs_RESTService.delete(Student.StudentID);
            promiseDelete.then(function (pl) {
                $scope.Message = "Student Deleted Successfuly";
                GetAllRecords();
                ClearModels();
            }, function (err) {
                console.log("Some Error Occured." + err);
            });
        }
    });

    app.service("CRUD_AngularJs_RESTService", function ($http) {
        //Create new record  
        this.post = function (Student) {
            var request = $http({
                method: "post",
                url: "http://localhost:56766/StudentService.svc/AddNewStudent",
                data: Student
            });
            return request;
        }

        //Update the Record  
        this.put = function (StudentID, Student) {
            debugger;
            var request = $http({
                method: "put",
                url: "http://localhost:56766/StudentService.svc/UpdateStudent",
                data: Student
            });
            return request;
        }

        this.getAllStudent = function () {
            return $http.get("http://localhost:56766/StudentService.svc/GetAllStudent");
        };

        //Get Single Records  
        this.get = function (StudentID) {
            return $http.get("http://localhost:56766/StudentService.svc/GetStudentDetails/" + StudentID);
        }

        //Delete the Record  
        this.delete = function (StudentID) {
            var request = $http({
                method: "delete",
                url: "http://localhost:56766/StudentService.svc/DeleteStudent/" + StudentID
            });
            return request;
        }

    });

})();

//
var-app；
（功能（）{
app=angular.module（“RESTClientModule”，[]）；
应用控制器（“CRUD_AngularJs_RESTController”，函数（$scope，CRUD_AngularJs_RESTService）{
$scope.OperType=1；
//1是指新条目
GetAllRecords（）；
//获取所有记录
函数GetAllRecords（）{
var promiseGet=CRUD_AngularJs_RESTService.getAllStudent（）；
然后（函数（pl）{$scope.Students=pl.data}，
函数（errorPl）{
$log.error（'获取记录时出现一些错误'，errorPl）；
});
}
//清除所有输入控件。
函数ClearModels（）{
$scope.OperType=1；
$scope.StudentID=“”；
$scope.Name=“”；
$scope.Email=“”；
$scope.Class=“”；
$scope.year=“”；
$scope.City=“”；
$scope.Country=“”；
}
//创建新记录并编辑现有记录。
$scope.save=函数（）{
var学生={
名称：$scope.Name，
电子邮件：$scope.Email，
Class:$scope.Class，
EnrollYear:$scope.EnrollYear，
城市：$scope.City，
国家：$scope.Country
};
如果（$scope.OperType==1）{
var promisePost=CRUD_AngularJs_RESTService.post（学生）；
promisePost.then（功能（pl）{
$scope.StudentID=pl.data.StudentID；
GetAllRecords（）；
ClearModels（）；
}，函数（err）{
console.log（“发生了一些错误”+err）；
});
}否则{
//编辑记录
调试器；
Student.StudentID=$scope.StudentID；
var promisePut=CRUD_AngularJs_RESTService.put（$scope.StudentID，Student）；
然后（功能（pl）{
$scope.Message=“学生已成功更新”；
GetAllRecords（）；
ClearModels（）；
}，函数（err）{
log（“发生了一些错误。”+err）；
});
}
};
//根据学生ID获取学生详细信息
$scope.get=函数（学生）{
var promiseGetSingle=CRUD_AngularJs_RESTService.get（Student.StudentID）；
promiseGetSingle.then（函数（pl）{
var res=损益数据；
$scope.StudentID=res.StudentID；
$scope.Name=res.Name；
$scope.Email=res.Email；
$scope.Class=res.Class；
$scope.EnrollYear=res.EnrollYear；
$scope.City=res.City；
$scope.Country=res.Country；
$scope.OperType=0；
},
函数（errorPl）{
log（'获取详细信息时出现一些错误'，errorPl）；
});
}
//删除记录
$scope.delete=函数（学生）{
var promiseDelete=CRUD_AngularJs_RESTService.delete（Student.StudentID）；
promiseDelete.then（功能（pl）{
$scope.Message=“学生已成功删除”；
GetAllRecords（）；
ClearModels（）；
}，函数（err）{
log（“发生了一些错误。”+err）；
});
}
});
app.service（“CRUD_AngularJs_RESTService”），函数（$http）{
//创造新记录
this.post=函数（学生）{
var请求=$http({
方法：“张贴”，
url:“http://localhost:56766/StudentService.svc/AddNewStudent",
资料来源：学生
});
返回请求；
}
//更新记录
this.put=函数（StudentID，Student）{
调试器；
var请求=$http({
方法：“放”，
url:“http://localhost:56766/StudentService.svc/UpdateStudent",
资料来源：学生
});
返回请求；
}
this.getAllStudent=函数（）{
返回$http.get（“http://localhost:56766/StudentService.svc/GetAllStudent");
};
//获取单个记录
this.get=函数（StudentID）{
返回$http.get（“http://localhost:56766/StudentService.svc/GetStudentDetails/“+学生ID）；
}
//删除记录
this.delete=函数（StudentID）{
var请求=$http({
方法：“删除”，
url:“http://localhost:56766/StudentService.svc/DeleteStudent/“+学生ID
});
返回请求；
}
});
})();

这是HTML代码

@{
    Layout = null;
}

<!DOCTYPE html>

<html data-ng-app="RESTClientModule">
<head title="ASAS">
    <title></title>
    <script src="~/Scripts/angular.min.js"></script>
    <script src="~/Scripts/MyScripts/Modules.js"></script>
</head>
<body>
    <table id="tblContainer" data-ng-controller="CRUD_AngularJs_RESTController">
        <tr>
            <td>
                <table style="border: solid 2px Green; padding: 5px;">
                    <tr style="height: 30px; background-color: skyblue; color: maroon;">
                        <th></th>
                        <th>ID</th>
                        <th>Name</th>
                        <th>Email</th>
                        <th>Class</th>
                        <th>Year</th>
                        <th>City</th>
                        <th>Country</th>
                        <th></th>
                        <th></th>
                    </tr>
                    <tbody data-ng-repeat="stud in Students">
                        <tr>
                            <td></td>
                            <td><span>{{stud.StudentID}}</span></td>
                            <td><span>{{stud.Name}}</span></td>
                            <td><span>{{stud.Email}}</span></td>
                            <td><span>{{stud.Class}}</span></td>
                            <td><span>{{stud.EnrollYear}}</span></td>
                            <td><span>{{stud.City}}</span></td>
                            <td><span>{{stud.Country}}</span></td>
                            <td>
                                <input type="button" id="Edit" value="Edit" data-ng-click="get(stud)" />
                            </td>
                            <td>
                                <input type="button" id="Delete" value="Delete" data-ng-click="delete(stud)" />
                            </td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
        <tr>
            <td>
                <div style="color: red;">{{Message}}</div>
                <table style="border: solid 4px Red; padding: 2px;">
                    <tr>
                        <td></td>
                        <td>
                            <span>Student ID</span>
                        </td>
                        <td>
                            <input type="text" id="StudentID" readonly="readonly" data-ng-model="StudentID" />
                        </td>
                    </tr>
                    <tr>
                        <td></td>
                        <td>
                            <span>Student Name</span>
                        </td>
                        <td>
                            <input type="text" id="sName" required data-ng-model="Name" />
                        </td>
                    </tr>
                    <tr>
                        <td></td>
                        <td>
                            <span>Email</span>
                        </td>
                        <td>
                            <input type="text" id="sEmail" required data-ng-model="Email" />
                        </td>
                    </tr>
                    <tr>
                        <td></td>
                        <td>
                            <span>Class</span>
                        </td>
                        <td>
                            <input type="text" id="sClass" required data-ng-model="Class" />
                        </td>
                    </tr>
                    <tr>
                        <td></td>
                        <td>
                            <span>Enrollement Year</span>
                        </td>
                        <td>
                            <input type="text" id="sEnrollYear" required data-ng-model="EnrollYear" />
                        </td>
                    </tr>
                    <tr>
                        <td></td>
                        <td>
                            <span>City</span>
                        </td>
                        <td>
                            <input type="text" id="sCity" required data-ng-model="City" />
                        </td>
                    </tr>
                    <tr>
                        <td></td>
                        <td>
                            <span>Country</span>
                        </td>
                        <td>
                            <input type="text" id="sCountry" required data-ng-model="Country" />
                        </td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                        <td>
                            <input type="button" id="save" value="Save" data-ng-click="save()" />
                            <input type="button" id="Clear" value="Clear" data-ng-click="clear()" />
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</body>
</html>
<script src="~/Scripts/MyScript/Module.js"></script>

@{
布局=空；
}
身份证件
名称
电子邮件
等级
年
城市
国家
{{stud.StudentID}
{{s
/// <reference path="../angular.min.js" />  
var app;

(function () {
    app = angular.module("RESTClientModule", []);

    app.controller("CRUD_AngularJs_RESTController", function ($scope, CRUD_AngularJs_RESTService) {

        $scope.OperType = 1;
        //1 Mean New Entry  

        GetAllRecords();
        //To Get All Records  
        function GetAllRecords() {
            var promiseGet = CRUD_AngularJs_RESTService.getAllStudent();
            promiseGet.then(function (pl) { $scope.Students = pl.data },
                function (errorPl) {
                    $log.error('Some Error in Getting Records.', errorPl);
                });
        }

        //To Clear all input controls.  
        function ClearModels() {
            $scope.OperType = 1;
            $scope.StudentID = "";
            $scope.Name = "";
            $scope.Email = "";
            $scope.Class = "";
            $scope.EnrollYear = "";
            $scope.City = "";
            $scope.Country = "";
        }

        //To Create new record and Edit an existing Record.  
        $scope.save = function () {
            var Student = {
                Name: $scope.Name,
                Email: $scope.Email,
                Class: $scope.Class,
                EnrollYear: $scope.EnrollYear,
                City: $scope.City,
                Country: $scope.Country
            };
            if ($scope.OperType === 1) {
                var promisePost = CRUD_AngularJs_RESTService.post(Student);
                promisePost.then(function (pl) {
                    $scope.StudentID = pl.data.StudentID;
                    GetAllRecords();

                    ClearModels();
                }, function (err) {
                    console.log("Some error Occured" + err);
                });
            } else {
                //Edit the record      
                debugger;
                Student.StudentID = $scope.StudentID;
                var promisePut = CRUD_AngularJs_RESTService.put($scope.StudentID, Student);
                promisePut.then(function (pl) {
                    $scope.Message = "Student Updated Successfuly";
                    GetAllRecords();
                    ClearModels();
                }, function (err) {
                    console.log("Some Error Occured." + err);
                });
            }
        };

        //To Get Student Detail on the Base of Student ID  
        $scope.get = function (Student) {
            var promiseGetSingle = CRUD_AngularJs_RESTService.get(Student.StudentID);
            promiseGetSingle.then(function (pl) {
                var res = pl.data;
                $scope.StudentID = res.StudentID;
                $scope.Name = res.Name;
                $scope.Email = res.Email;
                $scope.Class = res.Class;
                $scope.EnrollYear = res.EnrollYear;
                $scope.City = res.City;
                $scope.Country = res.Country;
                $scope.OperType = 0;
            },
                function (errorPl) {
                    console.log('Some Error in Getting Details', errorPl);
                });
        }

        //To Delete Record  
        $scope.delete = function (Student) {
            var promiseDelete = CRUD_AngularJs_RESTService.delete(Student.StudentID);
            promiseDelete.then(function (pl) {
                $scope.Message = "Student Deleted Successfuly";
                GetAllRecords();
                ClearModels();
            }, function (err) {
                console.log("Some Error Occured." + err);
            });
        }
    });

    app.service("CRUD_AngularJs_RESTService", function ($http) {
        //Create new record  
        this.post = function (Student) {
            var request = $http({
                method: "post",
                url: "http://localhost:56766/StudentService.svc/AddNewStudent",
                data: Student
            });
            return request;
        }

        //Update the Record  
        this.put = function (StudentID, Student) {
            debugger;
            var request = $http({
                method: "put",
                url: "http://localhost:56766/StudentService.svc/UpdateStudent",
                data: Student
            });
            return request;
        }

        this.getAllStudent = function () {
            return $http.get("http://localhost:56766/StudentService.svc/GetAllStudent");
        };

        //Get Single Records  
        this.get = function (StudentID) {
            return $http.get("http://localhost:56766/StudentService.svc/GetStudentDetails/" + StudentID);
        }

        //Delete the Record  
        this.delete = function (StudentID) {
            var request = $http({
                method: "delete",
                url: "http://localhost:56766/StudentService.svc/DeleteStudent/" + StudentID
            });
            return request;
        }

    });

})();

@{
    Layout = null;
}

<!DOCTYPE html>

<html data-ng-app="RESTClientModule">
<head title="ASAS">
    <title></title>
    <script src="~/Scripts/angular.min.js"></script>
    <script src="~/Scripts/MyScripts/Modules.js"></script>
</head>
<body>
    <table id="tblContainer" data-ng-controller="CRUD_AngularJs_RESTController">
        <tr>
            <td>
                <table style="border: solid 2px Green; padding: 5px;">
                    <tr style="height: 30px; background-color: skyblue; color: maroon;">
                        <th></th>
                        <th>ID</th>
                        <th>Name</th>
                        <th>Email</th>
                        <th>Class</th>
                        <th>Year</th>
                        <th>City</th>
                        <th>Country</th>
                        <th></th>
                        <th></th>
                    </tr>
                    <tbody data-ng-repeat="stud in Students">
                        <tr>
                            <td></td>
                            <td><span>{{stud.StudentID}}</span></td>
                            <td><span>{{stud.Name}}</span></td>
                            <td><span>{{stud.Email}}</span></td>
                            <td><span>{{stud.Class}}</span></td>
                            <td><span>{{stud.EnrollYear}}</span></td>
                            <td><span>{{stud.City}}</span></td>
                            <td><span>{{stud.Country}}</span></td>
                            <td>
                                <input type="button" id="Edit" value="Edit" data-ng-click="get(stud)" />
                            </td>
                            <td>
                                <input type="button" id="Delete" value="Delete" data-ng-click="delete(stud)" />
                            </td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
        <tr>
            <td>
                <div style="color: red;">{{Message}}</div>
                <table style="border: solid 4px Red; padding: 2px;">
                    <tr>
                        <td></td>
                        <td>
                            <span>Student ID</span>
                        </td>
                        <td>
                            <input type="text" id="StudentID" readonly="readonly" data-ng-model="StudentID" />
                        </td>
                    </tr>
                    <tr>
                        <td></td>
                        <td>
                            <span>Student Name</span>
                        </td>
                        <td>
                            <input type="text" id="sName" required data-ng-model="Name" />
                        </td>
                    </tr>
                    <tr>
                        <td></td>
                        <td>
                            <span>Email</span>
                        </td>
                        <td>
                            <input type="text" id="sEmail" required data-ng-model="Email" />
                        </td>
                    </tr>
                    <tr>
                        <td></td>
                        <td>
                            <span>Class</span>
                        </td>
                        <td>
                            <input type="text" id="sClass" required data-ng-model="Class" />
                        </td>
                    </tr>
                    <tr>
                        <td></td>
                        <td>
                            <span>Enrollement Year</span>
                        </td>
                        <td>
                            <input type="text" id="sEnrollYear" required data-ng-model="EnrollYear" />
                        </td>
                    </tr>
                    <tr>
                        <td></td>
                        <td>
                            <span>City</span>
                        </td>
                        <td>
                            <input type="text" id="sCity" required data-ng-model="City" />
                        </td>
                    </tr>
                    <tr>
                        <td></td>
                        <td>
                            <span>Country</span>
                        </td>
                        <td>
                            <input type="text" id="sCountry" required data-ng-model="Country" />
                        </td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                        <td>
                            <input type="button" id="save" value="Save" data-ng-click="save()" />
                            <input type="button" id="Clear" value="Clear" data-ng-click="clear()" />
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</body>
</html>
<script src="~/Scripts/MyScript/Module.js"></script>

protected void Application_BeginRequest(object sender, EventArgs e)
        {
            HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "*");
            if (HttpContext.Current.Request.HttpMethod == "OPTIONS")
            {
                HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods", "GET");
                HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods", "POST");
                HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods", "PUT");
                HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods", "DELETE");

                HttpContext.Current.Response.AddHeader("Access-Control-Allow-Headers", "Content-Type, Accept");
                HttpContext.Current.Response.AddHeader("Access-Control-Max-Age", "1728000");
                HttpContext.Current.Response.End();
            }
        }