azureでホストされているAPIへのアクセスCORSポリシーで拒否されたアプリケーション

Question

私たちはAzure Webサービスに取り組んでいるチームです。達成したいのは、AzureでホストされているJava API Appと通信できるJavaScriptフロントエンドを用意することです。

認証用にActive Directoryを使用しています。 Azureポータル内でCORSを設定しました。

this articleに記載されている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上で実行されます。さらに、我々の起源 "http://localhost:8888"を青空ポータルのCORSに追加しました。

コードは次のようになります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ポリシーによってブロックされている：いいえ 'アクセス制御 - 許可原点' ヘッダが存在しています要求されたリソース上でOrigin 'null'は であるため、アクセスは許可されません。

Chromeの開発者コンソールでは、連絡先APIに4つのリクエストがあります。しかし、すべてにステータスコード "302 Redirect"があります。最初の2つのエントリにはヘッダー「Access-Control-Allow-Origin：http://localhost:8888」が含まれていますが、他の2つのエントリはではなく、にこのヘッダーが含まれています。

EDIT：最初の2つのエントリの一つはXmlHttpRequestのであり、第二のエントリのいずれかが同じXmlHttpRequestのではなくHTTPのHTTPS有します。これに基づき

は

、我々は、アクセス制御が可能原産のフィールドを設定するために私たちのバックエンドで新しいフィルタを作成しました：

@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からこれら3つのフィールドが削除された：

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のデベロッパーコンソールの2番目のフィルタのすべてのヘッダーが表示されます。

しかし、すぐに私たちはフロントエンドから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ポリシーによってブロックされている：いいえ 'アクセス制御 - 許可原点' ヘッダが存在しています要求されたリソース上でOrigin 'null'は であるため、アクセスは許可されません。

編集：私が書いたように、2つのXmlHttpRequestsが作成されています。もう1つはhttpsです。だから、ライン

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

に私たちはerror()コールバック関数に実行 HTTPS にのhttpを変更した場合。

データ：ユーザー・ログインが

を必要しかし、私は前に書いたようにして、コンソールに、我々は出力を持っています。私たちはすでにテナントにログインしています。だから何がうまくいかないの？

Answer 1

VARエルグ= $ http.get（ 'のhttp：//.azurewebsites.net/api/contacts'）コードに基づいて

、あなたは要求がHTTPプロトコルとサービスでした。 Azure ADによって保護されているWeb APIにHTTPをリクエストすると、この問題が再現できます。 Azure ADは、HTTPをHTTPSにリダイレクトしているようです。

サービスURLをHTTPSに変更した後、この問題は修正されました。役に立っているかどうか教えてください。