2015-06-14 220 views
1

我遇到了一个CORS问题,当我使用Internet Explorer时完全正常工作,但无法与Google Chrome一起使用。MVC CORS适用于IE浏览器,但不适用于Chrome浏览器

我在Visual Studio 2013中有两个独立的项目:PROJECT 1在端口1044上,它只是一个空的项目,包含一个HTML页面,其中包含一个Button,它使用AngularJS拨打ACTION GetCustomer,位于PROJECT 2内的端口1042然后ACTION将JSON数据返回到PROJECT 1.

在IE中单击按钮并将数据返回到HTML文本框并显示“ShivDataFromServer”时,跨域调用正常工作。但在Chrome中也不会发生这种情况。

PROJECT 1上端口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 is 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 from Server" ng-click="GetData()" /> 
     </div> 
    </div> 
</body> 
</html> 

CustomerViewModel.js:

function MyController($scope, $http) { 
    $scope.Customer = { "Name": "ShivHardCodedData", "Amount": "1000" }; 

    $scope.CustomerView = { "Color": "" }; 

    //BELOW IS TRANSFORMATION LOGIC! Depending on Amount it will be 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项目在端口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 up name "ImAllowingCors" but ending "Attribute" is C# KEYWORD 
    public class ImAllowingCorsAttribute : ActionFilterAttribute 
    { 
     public override void OnActionExecuting(ActionExecutingContext filterContext) 
     { 
      //This means ALLOW any calls from a Cross-domain (i.e. allow calls from different server) 
      filterContext.RequestContext.HttpContext.Response.AddHeader("Access-Control-Allow-Origin", "*"); 

      base.OnActionExecuting(filterContext); 
     } 
    } 
} 

回答

0

即不计算在不同的端口电话,但相同的域作为交叉血统,而Chrome浏览器一样。因此,您需要将其设置为镀铬以实现此目的。

要做到这一点,你正在尝试的话,你就需要确保自定义过滤器被注册,我想你也需要你的属性更改为[ImAllowingCorsAttribute]: 请参阅:similar issue

您需要允许Cors为您的应用程序。类似以下动作注释:

[EnableCors(origins: "http://localhost:1042", headers: "*", methods: "*")] 

也许在您的属性中放置了一个断点,因为我怀疑它正在被击中。这应该告诉你如何启用cors: enabling Cors

+0

不知道为什么它仍然没有击中我的行动,即使经过上述更改。 – maf

+0

我已经更新了我的答案 – Sam

相关问题