Question

我们是一个致力于天蓝色网络服务的团队。我们想要实现的是拥有一个JavaScript前端，它可以与我们在Azure中托管的Java API App进行通信。

我们正在使用Active Directory进行身份验证。我们在Azure门户中配置了CORS。

我们已经使用Swagger编辑器创建了一个Java后端，如this article中所述。我们刚刚推出了这个例子来支持我们自己的数据模型。所以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上运行。因此，我们在天蓝色门户网站的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- 43483f616eb7 /的oauth2 / autho ... ％2Fapi％2Fcontacts％23安培;随机数= 7658b7c8155b4b278f2f1447d4b77e47_20161115124144' 被CORS政策阻止：没有'Access-Control-Allow-Origin' 标头出现在请求的资源上。原点'null'是因此不允许访问。

在Chrome的开发者控制台中，我们向联系人api看到了四个请求。但都有状态代码“302 Redirect”。前两个条目包含标题“Access-Control-Allow-Origin：http://localhost:8888”，但其他两个条目 not 包含此标头。

编辑：前两个条目之一是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- 43483f616eb7 /的oauth2 / autho ... ％2Fapi％2Fcontacts％23安培;随机数= 7658b7c8155b4b278f2f1447d4b77e47_20161115124144' 被CORS政策阻止：没有'Access-Control-Allow-Origin' 标头出现在请求的资源上。原点'null'是因此不允许访问。

编辑：正如我所写，有两个XmlHttpRequests。第二个是 https 。所以如果在行

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

我将 http 更改为 https ，我们遇到了error()回调函数。在控制台中我们有输出：

数据：需要用户登录

但正如我之前写的那样。我们已经登录了我们的租户。出了什么问题？

Answer 1

var erg = $ http.get（'http：//.azurewebsites.net/api/contacts'）

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

使用 HTTPS 更改服务网址后，问题已解决。请告诉我它是否有用。

通过CORS策略

1 个答案: