在 angularjs 中使用 $http.post() 时出现 CORS 问题

Question

我正在创建一个与 IdentityServer 3 一起使用的测试应用程序，我正在使用 AngularJs、Angular Ui 路由器和 oauth-ng 库来创建它。我的应用程序需要在客户端使用 OpenID 连接授权代码流。所以我对 oauth-ng 库做了很小的改动。我正在使用 oauth-ng lib 从 IdentityServer3 检索授权代码，我正在使用 $http.post() 将该代码发送到令牌端点并获取 access_token。

以下是我的代码..

JavaScript

.controller('LoginController', function ($scope, $http, $timeout, $location) {

        var getParamsFromUrl = function(url) {
            var splitted = url.split('?');
            splitted = splitted[1].split('&');
            var params = {};

            for (var i = 0; i < splitted.length; i++) {
                var param  = splitted[i].split('=');
                var key    = param[0];
                var value  = param[1];
                params[key] = value
            }
            return params;
        };

        var getToken = function (url, data) {
            return $http.post(url, data);
        };



        if($location.absUrl().split('?')[1]) {
            $scope.params = getParamsFromUrl($location.absUrl());

            var tokenData = {};
            tokenData.grant_type = 'authorization_code';
            tokenData.code = $scope.params.code;
            tokenData.redirect_uri = 'http://localhost:8000/login.html';

            var tokenEndpoint = 'https://localhost:44333/core/connect/token';

            getToken(tokenEndpoint, tokenData)
                .then(function (data, status, headers, config) {
                    console.log(data);
                    console.log(status);
                    console.log(headers);
                    console.log(config);
                });

        }
    });

授权代码已成功检索，当我尝试连接到令牌端点时，它会在浏览器上抛出以下错误。

OPTIONS https://localhost:44333/core/connect/token b @ angular.min.js:87n @ angular.min.js:82$get.f @ angular.min.js:80(anonymous function) @ angular.min.js:112$get.n.$eval @ angular.min.js:126$get.n.$digest @ angular.min.js:123$get.n.$apply @ angular.min.js:126(anonymous function) @ angular.min.js:17e @ angular.min.js:36d @ angular.min.js:17uc @ angular.min.js:18Jd @ angular.min.js:17(anonymous function) @ angular.min.js:250n.Callbacks.j @ jquery.min.js:2n.Callbacks.k.fireWith @ jquery.min.js:2n.extend.ready @ jquery.min.js:2I @ jquery.min.js:2

XMLHttpRequest cannot load https://localhost:44333/core/connect/token. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8000' is therefore not allowed access. The response had HTTP status code 405.

然后我尝试使用这行代码在应用程序配置中配置 $httpProvider。我的配置如下所示。

.config(function ($locationProvider, $httpProvider) {
        $locationProvider.html5Mode(true);
        $httpProvider.defaults.withCredentials = true; // <= Added this
    });

仍然遇到同样的问题。我怎样才能从客户端解决这个问题？我可以从客户端解决这个问题吗？

Answer 1

您请求的服务不允许 CORS（没有 Access-Control 作为响应的一部分发送）。您需要包含 header Access-Control-Allow-Origin: * 作为响应的一部分。

看到这个：http://www.html5rocks.com/en/tutorials/cors/

另请参阅：http://better-inter.net/enabling-cors-in-angular-js/

Answer 2

很确定代码授权流程是针对服务器端应用程序的。如果您可以为客户保密 "secret"!

，您应该只使用代码授权

他们是不使用隐式流程的理由吗？这样您将在重定向中获得令牌战斗，而不是令牌。

此页面解释了流程。 http://connect2id.com/learn/openid-connect

在 angularjs 中使用 $http.post() 时出现 CORS 问题

CORS issue when using $http.post() in angularjs

javascript

angularjs

cors

openid-connect

identityserver3