2015-06-14 150 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

相關問題