APIゲートウェイとしてZuulにCORSの操作方法+ AngularJS + Microservices

Question

私は、アーキテクチャは以下のAPIゲートウェイとしてZuulネットフリックスを使用するアプリケーションでいます

アーキテクチャが使用して、正常に動作していますブラウザと郵便配達員はマイクロサービス（サービス1,2,3）から異なるRESTエンドポイントにアクセスできます。しかし、フロントエンドのWebアプリケーション（AngularJS WebApp）で使用しようとすると、chromeコンソールで次のようなエラーが表示されます。私は@CrossOrigin注釈を設定する場合は、自身のアドレスとポートを介してサービスを使用して

XMLHttpRequest cannot load http://localhost:8080/person/api/all. Response for preflight is invalid (redirect) 

は動作します。しかし、ゲートウェイ経由でアクセスすると、残りのエンドポイントには@CrossOriginアノテーションは機能しません。

セキュリティ設定で以下のフィルタを作成しようとしましたが、それでも動作しない代わりに、クロームコンソールで以下のエラーが表示されました。

@Bean 
    public CorsFilter corsFilter() { 
     final UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(); 
     final CorsConfiguration config = new CorsConfiguration(); 
     config.setAllowCredentials(true); 
     config.addAllowedOrigin("*"); 
     config.addAllowedHeader("*"); 
     config.addAllowedMethod("OPTIONS"); 
     config.addAllowedMethod("HEAD"); 
     config.addAllowedMethod("GET"); 
     config.addAllowedMethod("PUT"); 
     config.addAllowedMethod("POST"); 
     config.addAllowedMethod("DELETE"); 
     config.addAllowedMethod("PATCH"); 
     source.registerCorsConfiguration("/**", config); 
     return new CorsFilter(source); 
    } 

ブラウザのコンソール（クローム）...以下は

XMLHttpRequest cannot load http://localhost:8080/person/api/all. Redirect from 'http://localhost:80/person/api/all' to 'http://localhost:80' has been blocked by CORS policy: Request requires preflight, which is disallowed to follow cross-origin redirect. 

はサンプルAngularJS HTTPリクエストです。

app.controller('loginCtrl', [ 
    '$scope', '$http', function($scope, $http) { 

     $http.get('http://localhost:8080/person/api/all').then(function(data) { 
     return console.log(data.data); 
     }); 
]); 

どのように対処する方法を知っていますか？多くのチュートリアルがこことそこにありますが、webappもまた、apiゲートウェイ内に置かれているか、@EnableZuulProxyアノテーションで分離されていて、私が望んでいないものです。

誰かが助けることができる場合は、事前に感謝します。同様のアーキテクチャを使用して

Answer 1

は、同様の問題に直面し、私は次の変更を行なったし、私の仕事：

config.setAllowCredentials(true); 
config.addAllowedOrigin("*"); 
config.addAllowedHeader("*"); 
config.addAllowedMethod("OPTIONS"); 
config.addAllowedMethod("HEAD"); 
config.addAllowedMethod("GET"); 
config.addAllowedMethod("PUT"); 
config.addAllowedMethod("POST"); 
config.addAllowedMethod("DELETE"); 
config.addAllowedMethod("PATCH"); 
source.registerCorsConfiguration("/**", config); 

を

config.setAllowCredentials(true); 
config.addAllowedOrigin("*"); 
config.addAllowedHeader("*"); 
config.addAllowedMethod("*"); 
source.registerCorsConfiguration("*", config); 

と私の角度httpリクエスト中に私は、

{'Access-Control-Allow-Origin':'*'} 

をヘッダを追加しました

私のために働いた。

私はZuulルートマッピングでマップされた最初のURLにしかアクセスできなかった元々の状況で試行していました。/**を*に置き換えて問題なくすべてのマッピングにアクセスできるようになりました。また、Angular側でも同様に、すべての要求にヘッダーを含める必要があります。 私はこの問題を初めて抱えています。後ほど詳しい情報や詳細があるかもしれませんが、私にとってはうまくいっていると言えるでしょう。