Angular http.get + WebApi = Cors 失败

Posted 2023-03-04

【中文标题】Angular http.get + WebApi = Cors 失败

【英文标题】：Angular http.get + WebApi = Cors failure

【发布时间】：2017-02-15 13:27:15

【问题描述】：

在服务器端，我有一个 C# web api，包括一个在类级别上属性如下的控制器：

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

我可以进行 ajax 调用，例如形成本地主机就好了。

现在我从 AngularJS 开始，http.get-method 失败并显示以下消息：

XMLHttpRequest 无法加载 http://localhost:8081/DividendsManager.Web.Api/api/securities/GetSecurities?yearsDividendsDontDecrease=40。请求的资源上不存在“Access-Control-Allow-Origin”标头。因此不允许访问 Origin 'null'。

这是我的 AngularJS 代码：

    <script>
        var myApp = angular.module('myApp', []);

        myApp.controller("myController", function($scope, $http) 

            var onSuccess = function(data, status, headers, config) 
                $scope.data = data;
            ;

            var onError = function(data, status, headers, config) 
                $scope.error = status;
            

            var promise = $http.get("http://localhost:8081/DividendsManager.Web.Api/api/securities/GetSecurities?yearsDividendsDontDecrease=40");

            promise.success(onSuccess);
            promise.error(onError);
        );
</script>

在 Fiddler 中，我可以看到，AngularJS-HTTP-Get 请求的标头有一个“Origin: null”条目，这似乎与问题有关。我认为，如果改为“null”，则值为“http://localhost”，它应该可以工作。

谁能帮帮我？

谢谢！

【问题讨论】：

你必须实现 CORS 服务器端，因为端口不同。就浏览器而言，这构成了不同的起源

【参考方案1】：

可能是因为在您的[EnableCors] 属性中，您需要将headers: "", methods: "" 更改为headers: "*", methods: "*"？

此外，您不应在 origins 网址的末尾包含正斜杠（如果您这样做了）。

【讨论】：

嗨 kimbaudi，感谢您的回答。在属性中，我做了“*”，而不是“”。抱歉错字错误。另外我最后没有使用正斜杠（localhost，不是localhost）。如前所述，其他 ajax 调用工作正常。这似乎是 AngularJS 的问题。

您能发布 HTTP 标头响应吗？你得到像Access-Control-Allow-Headers: Content-TypeAccess-Control-Allow-Methods: GET, POST, OPTIONSAccess-Control-Allow-Origin: *这样的东西吗？您可能需要在 ApiController 中设置允许的 HTTP 方法：public HttpResponseMessage Get() ...

您好，kimbuaid，感谢您的帮助。但现在我知道我自己的错误并且它起作用了 - 直到下一次;）有关详细信息，请参阅我的答案。

【参考方案2】：

我们在项目中遇到了同样的问题，我们根据各个网站的建议尝试了很多选项。但是在我们的案例中起作用/起作用的是编写自定义 CORS 提供程序，如 here 所述。

【讨论】：

嗨，山姆，我认为问题出在客户端，因为 html 标头中的 origin 属性为空。通过否认这一点，服务器可以正常工作。如果我使用 AngularJS 以外的其他 ajax 技术，它会按计划工作。

【参考方案3】：

快点！

今天在新鲜空气中跑步时，我突然意识到为什么 Origin 为空。是的，因为我不是在 IIS 中调用网站，而是直接在文件系统中打开文件。当然，这样做时没有有效的 URL，并且 Web 服务器的 Origin 为空。