带有授权标头的 AngularJS CORS

Posted 2023-02-27

【中文标题】带有授权标头的 AngularJS CORS

【英文标题】：AngularJS CORS with Authorization header

【发布时间】：2014-12-25 10:02:20

【问题描述】：

很抱歉还有一个关于 Angular 和 CORS 的问题，但我无法确定问题所在。我的基本设置是一个纯 Angular 独立网站，因此没有 Express 或任何服务器端组件，它与另一台服务器上的基于 Java 的 API 对话。该 API 使用 JAX-RS 构建并位于 JBoss 7.1.3 应用服务器中。我可以访问 angular 和 java 的代码。

在 API 方面，CORS 使用下面所示的流行的交易公司 CORS 过滤器启用。

<filter>
    <filter-name>CORS</filter-name>
    <filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class>
    <init-param>
        <param-name>cors.supportedMethods</param-name>
        <param-value>GET, POST, HEAD, PUT, DELETE, OPTIONS</param-value>
    </init-param>
    <init-param>
        <param-name>cors.supportedHeaders</param-name>
        <param-value>Origin, Accept, Content-Type, X-Requested-With, Cookie,content-type</param-value>
    </init-param>
</filter>
<filter-mapping>
    <filter-name>CORS</filter-name>
    <url-pattern>/*</url-pattern>
</filter-mapping>

API 的工作方式是向返回令牌的端点提供用户名和密码，然后此令牌将包含在每个后续请求的授权标头中。该过程的第一部分工作正常，我可以提供有效的凭据并接收令牌，但随后的任何请求都无法正常工作。因此，在我的 Angular 服务中，我有以下登录方法，该方法会获取我的令牌，然后尝试获取当前登录的用户。

login: function(username, password)

        var deferred = $q.defer();

        $http(
            method: 'POST',
            url: 'http://localhost:8080/website-api/rest/account/token',
            headers: 'Content-Type': 'application/x-www-form-urlencoded', 'Accept': 'application/json',
            transformRequest: function(obj) 
                var str = [];
                for(var p in obj)
                    str.push(encodeURIComponent(p) + '=' + encodeURIComponent(obj[p])); 
                
                return str.join('&');
            ,
            data: username: username, password: password 
        )
        .success(function(token) 

            $log.info(token.jwt);

            var requestConfig = 
                headers: 
                    'Authorization': token.jwt,
                    'Accept': 'application/json',
                    'X-Testing': 'Testing'
                
            ;

            $http.get('http://localhost:8080/website-api/rest/users/current', requestConfig)
                .success(function(user) 

                    $log.info('Retrieved User');
                    user.sessionToken = token.jwt;
                    deferred.resolve(user);

                )
                .error(function(data, status, headers, config) 

                    $log.info(data);
                    $log.info(status);
                    $log.info(headers);
                    $log.info(config);
                );

        )
        .error(function(data, status, headers, config) 

            $log.info(data);
            $log.info(status);
            $log.info(headers);
            $log.info(config);
        );

        return deferred.promise;
    

第一个请求完美运行，第二个失败并出现错误：

XMLHttpRequest cannot load http://localhost:8080/website-api/rest/users/current. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:9000' is therefore not allowed access.

我无法确定 API 上的 CORS 过滤器设置是否是我的问题的原因，或者是我在从 Angular 发送请求时没有正确执行的操作。我怀疑它是 Angular，因为我可以使用第三方服务 Postman 和 Hurl.it 来测试我的 API 端点，它们会按预期返回用户对象。

任何帮助将不胜感激！

【参考方案1】：

基于阅读此post 的预感，我注意到我不仅在接受的标头列表中定义了两次Content-Type，而且我没有将Authorization 设置为允许的标头。 CORS 过滤器拒绝任何传入的请求，其中包含不允许的标头，从而导致我的 403 错误。