CORH策略阻止了XMLHttpRequest无法加载

时间：2017-08-20 01:13:04

标签： c angularjs wcf

我试图在Angular JS Application中使用wcf（Rest）服务。我的Wcf服务工作正常但是当我在谷歌浏览器中运行我的应用程序时，它无法从数据库获取数据，我也可以执行插入，更新和删除操作。当我运行应用程序时，它不会显示任何错误，但是当我在午餐时使用开发人员工具时，我会看到此错误。

？o = 3＆amp; g = EC0825C4-90A4-2692-D257-CD2C2B565912＆amp; s = 1A2C77E8-0498-4A11-B8B8-D740DBEC71C4＆amp; z = 1403834305：2未捕获的SyntaxError：意外的标记＆lt;     索引：1 XMLHttpRequest无法加载http://localhost:50028/StudentService.svc/GetAllStudent。从＆＃39; http://localhost:50028/StudentService.svc/GetAllStudent＆＃39;重定向到＆＃39; http://localhost:50028/StudentService.svc/GetAllStudent/＆＃39;被CORS政策阻止：No＆＃39; Access-Control-Allow-Origin＆＃39;头

这是My Angular JS Code ... 

/// <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:50028/StudentService.svc/AddNewStudent",
                data: Student
            });
            return request;
        }

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

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

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

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

    });

})();

这是HTML CODE .. 

@{
    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>

当我运行应用程序时，这是我的屏幕截图.. Click here to see the result

任何帮助对我来说都很棒。谢谢

0 个答案:

没有答案
相关问题
最新问题