c - XMLHttpRequest cannot load has been blocked by CORS policy -
i trying consume wcf(rest) service in angular js application. wcf service working fine when run application in google chrome unable data database , can insert , update , delete operation. when run application not show error when lunch developer tools see following errors.
?o=3&g=ec0825c4-90a4-2692-d257-cd2c2b565912&s=1a2c77e8-0498-4a11-b8b8-d740dbec71c4&z=1403834305:2 uncaught syntaxerror: unexpected token < index:1 xmlhttprequest cannot load http://localhost:50028/studentservice.svc/getallstudent. redirect 'http://localhost:50028/studentservice.svc/getallstudent' 'http://localhost:50028/studentservice.svc/getallstudent/' has been blocked cors policy: no 'access-control-allow-origin' header
here 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 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 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 , edit 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 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 student detail on 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 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 record this.delete = function (studentid) { var request = $http({ method: "delete", url: "http://localhost:50028/studentservice.svc/deletestudent/" + studentid }); return request; } }); })(); here 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> here screen shot when run application.. 
any great me .thanks
Comments
Post a Comment