Question

我遇到了一个CORS问题，当我使用Internet Explorer时它完全正常，但不适用于谷歌浏览器。

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

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

端口1044上的PROJECT 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);
        }
    }
}

Answer 1

ie不计算不同端口上的呼叫，但是相同的域是交叉来源，而Chrome则是。因此，您需要为chrome设置它以允许此操作。

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

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

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

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

MVC CORS适用于IE，但不适用于Chrome

1 个答案: