MVC CORS 在 IE 中有效，但在 Chrome 中无效答案

【问题标题】：MVC CORS works in IE but not in ChromeMVC CORS 在 IE 中有效，但在 Chrome 中无效
【发布时间】：2015-06-16 16:20:58
【问题描述】：

我遇到了一个 CORS 问题，当我使用 Internet Explorer 时完全可以正常工作，但不能使用 Google Chrome。

我在 Visual Studio 2013 中有 2 个单独的项目：PROJECT 1 在端口 1044 上，它只是一个空项目，其中包含一个带有按钮的 HTML 页面，该按钮使用 AngularJS 来调用位于端口上的 PROJECT 2 内的 ACTION GetCustomer 1042. 然后 ACTION 将 JSON 数据返回给 PROJECT 1。

当在 IE 中单击 Button 并将数据返回到 HTML 文本框时，跨域调用工作正常，显示“ShivDataFromServer”。但同样的情况在 Chrome 中不会发生。

端口 1044 上的项目 1：

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 是端口 1042 上的 MVC 项目：

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);
        }
    }
}

【问题讨论】：

标签： asp.net-mvc cors

【解决方案1】：

ie 不计算不同端口上的调用，但将同一个域计算为跨域，而 Chrome 计算。因此，您需要为 chrome 设置它以允许这样做。

要按照您尝试的方式进行操作，您需要确保已注册自定义过滤器，并且我认为您还需要将属性更改为 [ImAllowingCorsAttribute]：见：similar issue

您需要为您的应用允许 Cors。类似于动作上方的以下注释：

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

也许在你的属性中放置一个断点，因为我怀疑它被击中了。这应该向您展示如何启用 cors： enabling Cors

【讨论】：

不知道为什么即使经过上述更改，它仍然没有击中我的 ACTION。