访问azure托管API应用程序被CORS策略拒绝

Question

我们是一个致力于azure web服务的团队。我们想要实现的是拥有一个JavaScript前端，它可以与托管在Azure中的Java API应用程序进行通信。

我们正在使用活动目录进行身份验证。并且我们已经在Azure门户中配置了CORS。

我们已经用Swagger Editor创建了一个Java后端，如本文所述。我们只是改进了这个示例以支持我们自己的数据模型。因此，ApiOriginFilter类仍然保持不变:

@javax.annotation.Generated(value = "class io.swagger.codegen.languages.JavaJerseyServerCodegen", date = "2016-11-08T15:40:34.550Z")
public class ApiOriginFilter implements javax.servlet.Filter {
    public void doFilter(ServletRequest request, ServletResponse response,
            FilterChain chain) throws IOException, ServletException {
        HttpServletResponse res = (HttpServletResponse) response;
        res.addHeader("Access-Control-Allow-Origin", "*");
        res.addHeader("Access-Control-Allow-Methods", "GET, POST, DELETE, PUT");
        res.addHeader("Access-Control-Allow-Headers", "Content-Type");
        chain.doFilter(request, response);
    }
    public void destroy() {}
    public void init(FilterConfig filterConfig) throws ServletException {}
}

我们的前端在本地PC上运行。因此，我们进一步在azure门户的CORS中添加了我们的原点"http://localhost:8888"。

前端JavaScript代码如下所示:

var app = angular.module('demo', ['AdalAngular', 'ngRoute'])
    .controller('GetDataController', ['$scope', '$http', '$timeout', 'adalAuthenticationService', function($scope, $http, $timeout, adalAuthenticationService) {
        $scope.loggedIn = "Logged out";
        $scope.responseData = "No Data";
        $scope.loading = "";
        $scope.loginAdal = function(){
          adalAuthenticationService.login();
        }
        $scope.getData = function(){            
          $http.defaults.useXDomain = true;
          delete $http.defaults.headers.common['X-Requested-With'];
          $scope.loading = "loading...";
          var erg = $http.get('http://<our-backend>.azurewebsites.net/api/contacts')
            .success(function (data, status, headers, config) {
                console.log("SUCCESS");
                $scope.loading = "Succeeded";
                $scope.loggedIn = "LOGGED IN";
                $scope.responseData = data;     
            })
            .error(function (data, status, header, config) {
                console.log("ERROR");
                $scope.loading = "Error";
                console.log("data: ", data);
            });
        }
    }]);
    app.config(['$locationProvider', 'adalAuthenticationServiceProvider', '$httpProvider', '$routeProvider', function($locationProvider, adalAuthenticationServiceProvider, $httpProvider, $routeProvider) {
        $locationProvider.html5Mode({
          enabled: true,
          requireBase: false,
          hashPrefix: '!'
        });
        var theEndpoints = {
          "https://<our-backend>.azurewebsites.net/api/contacts": "f0f91e4a-ad53-4a4a-ac91-431dd152f386", 
        };
        adalAuthenticationServiceProvider.init(
        {
            anonymousEndpoints: [],
            instance: 'https://login.microsoftonline.com/',
            tenant: "<our-tenant>.onmicrosoft.com", 
            clientId: "f6a7ea99-f13b-4673-90b8-ef0c5de9822f", 
            endpoints: theEndpoints 
        },
        $httpProvider 
        );
}]);

但是从前端调用后端，我们在登录到租户后得到以下错误:

XMLHttpRequest无法加载https://[our-backend].azurewebsites.net/api/contacts。从"https://[our-backend].azurewebsites.net/api/contacts"重定向到"https://login.windows.net/12141bed-36f0-4fc6-b70c-43483 f616eb7/oauth2/autho……% 2 fapi % 2 fcontacts % 23, nonce = 7658 b7c8155b4b278f2f1447d4b77e47_20161115124144 '已被CORS策略阻止:No Access-Control-Allow-Origin标头存在于请求的资源上。原点'null'是因此不允许访问。

在Chrome的开发者控制台，我们看到四个请求我们的联系人api。但状态码都是"302重定向"前两个条目包含头"Access-Control-Allow-Origin:http://localhost:8888"，但其他两个条目不包含此头。

编辑:前两个条目之一是XmlHttpRequest，第二个条目之一是相同的XmlHttpRequest，但使用https而不是http。基于此，我们在后端创建了一个新的过滤器来设置access-control-allow-origin字段:

@Provider
public class CrossOriginFilter implements ContainerResponseFilter {
    @Override
    public void filter(ContainerRequestContext containerRequestContext, ContainerResponseContext containerResponseContext) throws IOException {
        containerResponseContext.getHeaders().add("Access-Control-Allow-Origin", "*");
        containerResponseContext.getHeaders().add("Access-Control-Allow-Headers", "origin, content-type, accept, authorization");
        containerResponseContext.getHeaders().add("Access-Control-Allow-Credentials", "true");
        containerResponseContext.getHeaders().add("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS, HEAD");
        containerResponseContext.getHeaders().add("Access-Control-Max-Age", "1209600");    
    }
}

并从ApiOriginFilter中删除了这三个字段:

res.addHeader("Access-Control-Allow-Origin", "*");
res.addHeader("Access-Control-Allow-Methods", "GET, POST, DELETE, PUT");
res.addHeader("Access-Control-Allow-Headers", "Content-Type");

现在，如果我们在本地运行后端，我们会在Chrome的开发者控制台看到来自第二个过滤器的所有这些标题。

但是一旦我们将后端部署到azure，我们不知何故失去了这个头，并且在从前端访问api时再次出现相同的错误:

XMLHttpRequest无法加载https://[our-backend].azurewebsites.net/api/contacts。从"https://[our-backend].azurewebsites.net/api/contacts"重定向到"https://login.windows.net/12141bed-36f0-4fc6-b70c-43483 f616eb7/oauth2/autho……% 2 fapi % 2 fcontacts % 23, nonce = 7658 b7c8155b4b278f2f1447d4b77e47_20161115124144 '已被CORS策略阻止:No Access-Control-Allow-Origin标头存在于请求的资源上。原点'null'是因此不允许访问。

编辑:正如我写的，有两个xmlhttprequest。第二个是https。在

行中

var erg = $http.get('http://<our.backend>.azurewebsites.net/api/contacts')

我改变http到https我们运行到error()回调函数。在控制台中，我们有输出:

data: User login is required

但正如我之前写的。我们已经登录到我们的租户。那么到底出了什么问题呢?

Answer 1

var erg = $http.get('http://.azurewebsites.net/api/contacts')

根据代码，您使用HTTP协议请求服务。当我使用HTTP请求Azure AD保护的web API时，我能够重现此问题。似乎Azure AD将重定向HTTP到HTTPS。

在我用HTTPS更改服务URL后，问题被修复了。请告诉我是否有帮助。