認証時にクロスオリジン要求がブロックされる

Question

さまざまなバックエンドAPIを保護するOAuth2認証システムを設計しようとしています。私はthe three interconnected Spring Boot/Cloud/OAuth2 apps in this github projectをダウンロードしてインストールすることから始めました。

しかし、私のプロジェクトは、2つの主要なアーキテクチャの変更が必要になります。

1.) The main portal UI must be running in Node.js, so that users can 
    view a public site and also login using a Node.js-hosted app that 
    makes REST calls to a backend authentication server, without feeling 
    like they are being redirected anywhere for authentication. 

2.) My app requires multi-factor authentication, so I need to create (or 
    at least customize) my own endpoints on the `authserver` app instead 
    of relying to the standard password authentication endpoint. 

私のNode.jsのホストされたUIアプリが正常にauthserverアプリとresourceアプリと対話することができるようになされる必要が具体的にどのような変化？どちらか自分のNode.jsのポータルアプリにOR AngularJSコードがauthserverを呼び出そうとした場合、次のエラーメッセージを示すFireFoxのコンソールでgithubのサンプルの結果でuiアプリにAngularJSログインコードを追加する瞬間

、 port 9000上で実行されているアプリ：

Cross-Origin Request Blocked: The Same Origin Policy disallows reading 
the remote resource at http://localhost:9000/login-form. (Reason: CORS 
header 'Access-Control-Allow-Origin' missing). <unknown> 

Cross-Origin Request Blocked: The Same Origin Policy disallows reading 
the remote resource at http://localhost:9000/login-form. (Reason: CORS 
request failed). 

私はauthserverエンドポイントに追加された新しい/login-formエンドポイントである呼び出すAngularJSコード：

$scope.credentials = {}; 

$scope.loginError = false; 
$scope.showLogin = false; 

$scope.loginShow = function() { 
    $scope.showLogin = true; 
    console.log('filler to add break point for debugger.'); 
}; 

$scope.loginLocal = function() { 
    console.log('Just filler to add a break point in debugger.'); 
     var funcJSON = { 'type': 'Message', 
       'content1': $scope.credentials.username, 
       'content2': $scope.credentials.password 
    }; 
     console.log('filler to add break point.'); 
    $http.post('http://localhost:9999/uaa/login-form', funcJSON).then(function(response) { 
     if(response.data.content1==='success'){ 
      $scope.Oauthenticated = true; 
      console.log('filler to add a break point'); 
     }else { 
      $scope.Oauthenticated = false; 
      $scope.loginError = true; 
      console.log('filler to add break point'); 
     } 
    }); 
}; 

FireFoxのデバッガが上部に示さFireFoxのコンソールでエラーをスロー上記AngularJSコードの行であることを示しています

$http.post('http://localhost:9999/uaa/login-form', funcJSON).then(function(response) { 

IはauthserverアプリでAuthserverApplication.javaファイルに新しい/login-formエンドポイントを追加し、およびyou can read my entire new AuthserverApplication.java file at a file sharing site by clicking on this link。

私は、Spring Bootの中でメインポータルUIアプリを実行することができます。 @EnableSidecar注釈を使用する必要があることを読んでいます。しかし、新しいログインフォームが上記のgithubリンクのSpring Cloud uiアプリ内で実行されるのか、Node.jsでホストされるポータルUIから実行されるのか、同じエラーメッセージが表示されます。 Node.jsでホストされているポータルアプリケーションからこの認証を安全に管理するために、何を変更する必要がありますか？

---

進行中の研究：@Ulises'提案当たり

---

、Iは、AuthserverApplication.javaのメソッドをオーバーライドするコードを追加しました。また、URLをダブルチェックして、$http.post(...コールのURLを少し変更しました（これは混乱を避けるために上記のインラインで変更されました）。結果​​はで、FireFoxコンソールの同じエラーに加えて、 read the entire Spring Boot log for the request at a file sharing site by clicking on this linkできる。read my new AuthserverApplication.java class including @Ulises's suggestion at a file sharing site by clicking this linkすることができます

。authserverアプリのための春のブートログにコールがport 7000上で実行されている可能Node.jsのホスト型アプリ。

そして、あなた。同様に

---

、私は読むために提案された方法に変更する場合：

@Override 
public void addCorsMappings(CorsRegistry registry) { 
    registry.addMapping("/login-form").allowedOrigins("http://localhost*"); 
} 

を私はthe Spring Boot error log that you can read at a file sharing site by clicking on this linkを取得します。

リクエストヘッダ：

Host: localhost:9999 
User-Agent: Mozilla/5.0 (X11; Linux x86_64; rv:38.0) Gecko/20100101 Firefox/38.0 
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 
Accept-Language: en-US,en;q=0.5 
Accept-Encoding: gzip, deflate 
Origin: http://localhost:7000 
Access-Control-Request-Method: POST 
Access-Control-Request-Headers: content-type,x-requested-with 
Connection: keep-alive 
Pragma: no-cache 
Cache-Control: no-cache 

レスポンスヘッダ：

Cache-Control: no-cache, no-store, max-age=0, must-revalidate, no-store 
Content-Type: application/xhtml+xml;charset=UTF-8 
Date: Wed, 13 Apr 2016 09:32:40 GMT 
Expires: 0 
Pragma: no-cache, no-cache 
Server: Apache-Coyote/1.1 
Transfer-Encoding: chunked 
WWW-Authenticate: Bearer realm="null", error="unauthorized", error_description="Full authentication is required to access this resource" 
X-Frame-Options: DENY 
X-XSS-Protection: 1; mode=block 
x-content-type-options: nosniff 

同じ新しいもエラーが解消されないとFirefoxデバッガの[ネットワーク]タブには、次の生のヘッダと、401エラーになります私は、AuthserverApplication.javaの内部クラスLoginConfigに次のメソッドを追加して、Springセキュリティが/login-formエンドポイントを無視するようにしようとしています：

@Override 
public void configure(WebSecurity webSecurity) throws Exception { 
    webSecurity.ignoring().antMatchers("/login-form", "/error"); 
} 

私は現在the Spring OAuth2 Developer's Guide at this linkを読んでおり、sample apps on github at this linkを指しています。ただし、サンプルアプリケーションではJSPが使用されていますが、これは廃止されており、このOPで説明したユースケースには対応していません。

@Override 
    public void addCorsMappings(CorsRegistry registry) { 
     registry.addMapping("/login-form").allowedOrigins("http://localhost:9000"); 
    } 

それともどこからそれを呼び出しているの起源：このようWebMvcConfigurerAdapterからごAuthServerApplicationオーバーライドメソッドaddCorsMapping(CorsRegistry)で

Answer 1

。 *をすべて使用したり、細かい設定を追加したりすることもできます。