asp.net mvc - MVC CORS works in IE but not in Chrome -
i'm stuck cors issue works totally fine when i'm using internet explorer, doesn't work google chrome.
i have 2 separate projects in visual studio 2013: project 1 on port 1044, it's empty project containing html page button uses angularjs make call action getcustomer
residing inside project 2 on port 1042. action returns json data project 1.
the cross domain call works fine when button clicked in ie , returns data html textbox saying "shivdatafromserver". same doesn't happen in chrome.
project 1 on port 1044:
homepage.html:
<!doctype html> <html> <head> <title></title> </head> <script src="angular.min.js"></script> <!--<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>--> <body> <script type="text/javascript" src="customerviewmodel.js"></script> <div ng-app> <!-- below our view i.e. display--> <div id="viewcustomer" ng-controller="mycontroller"> customer name: <input type="text" id="txtcustomername" ng-model="customer.name" /> <br /> customer amount: <input type="text" id="txtcustomeramount" ng-model="customer.amount" /> <br /> <div style="width : 242px; height : 26px; background-color : {{customerview.color}}"></div> <br /> <input type="button" id="btn1" value="get data server" ng-click="getdata()" /> </div> </div> </body> </html>
customerviewmodel.js:
function mycontroller($scope, $http) { $scope.customer = { "name": "shivhardcodeddata", "amount": "1000" }; $scope.customerview = { "color": "" }; //below transformation logic! depending on amount green or red meaning "danger". $scope.$watch("customer.amount", function() { if ($scope.customer.amount < 1000) { $scope.customerview.color = "green"; } else { $scope.customerview.color = "red"; } } ); $scope.getdata = function () { //below works!! $http({ method: "get", url: "http://localhost:1042/customer/getcustomer" }) .success(function (data, status, headers, config) { $scope.customer = data; }) .error(function (data, status, headers, config) { }); } //end of "getdata() function" }
project 2 mvc project on port 1042:
customercontroller.cs:
using system; using system.collections.generic; using system.linq; using system.web; using system.web.mvc; using p10jsonjquery_httpservice.models; namespace p10jsonjquery_httpservice.controllers { public class customercontroller : controller { [imallowingcors] public actionresult getcustomer() { customer objcustomer=new customer(); objcustomer.name = "shivdatafromserver"; objcustomer.amount = 1000; return json(objcustomer, jsonrequestbehavior.allowget); } } //cors (cross origin resource sharing). i've made name "imallowingcors" ending "attribute" c# keyword public class imallowingcorsattribute : actionfilterattribute { public override void onactionexecuting(actionexecutingcontext filtercontext) { //this means allow calls cross-domain (i.e. allow calls different server) filtercontext.requestcontext.httpcontext.response.addheader("access-control-allow-origin", "*"); base.onactionexecuting(filtercontext); } } }
ie not count calls on different ports, same domain being cross origin, whereas chrome does. thus, need set chrome allow this.
to way trying, need make sure custom filter registered , think need change attribute [imallowingcorsattribute]
: see: similar issue
you need allow cors app. following annotation above action:
[enablecors(origins: "http://localhost:1042", headers: "*", methods: "*")]
perhaps put breakpoint in attribute, doubt being hit. should show how enable cors: enabling cors
Comments
Post a Comment