角2スプリングブートCORSの問題

Question

私は、バックエンド用のSpringブートとフロントエンド用のアンカー2を使ってアプリケーションを開発しようとしています。

実際に私は春からmvcログインページにアクセスするときに接続の問題があります。

（コンソール）

（角2コード）

春コード

：

は、私は次のような問題を取得します

FrontEndポートのグローバルCors Configurationを設定しました。私の要求は応答ステータス200で返されます。しかし、コンソールにエラーメッセージが表示されるので、私は応答にアクセスできません。

Spring dosntに間違いがあります。

Answer 1

最初に、Corsの設定がバックエンドに追加されていることを理解する必要があります。 Angular2 Appからのリクエストごとにcorsヘッダーを送信する必要はありません。これを理解すると、この問題は、春のセキュリティ構成クラスでグローバルCORS構成を追加することで簡単に修正できます。

@Component 
@Order(Ordered.HIGHEST_PRECEDENCE) 
public class MyCorsFilter implements Filter{ 

public MyCorsFilter() { 
    super(); 
} 

@Override 
public final void doFilter(final ServletRequest req, final ServletResponse res, final FilterChain chain) throws IOException, ServletException { 
    final HttpServletResponse response = (HttpServletResponse) res; 
    response.setHeader("Access-Control-Allow-Origin", "http://localhost:3000"); 

    // without this header jquery.ajax calls returns 401 even after successful login and SSESSIONID being succesfully stored. 
    response.setHeader("Access-Control-Allow-Credentials", "true"); 

    response.setHeader("Access-Control-Allow-Methods", "POST, PUT, GET, OPTIONS, DELETE"); 
    response.setHeader("Access-Control-Max-Age", "3600"); 
    response.setHeader("Access-Control-Allow-Headers", "X-Requested-With, Authorization, Origin, Content-Type, Version"); 
    response.setHeader("Access-Control-Expose-Headers", "X-Requested-With, Authorization, Origin, Content-Type"); 

    final HttpServletRequest request = (HttpServletRequest) req; 
    if (!request.getMethod().equals("OPTIONS")) { 
     chain.doFilter(req, res); 
    } else { 
     // do not continue with filter chain for options requests 
    } 
} 

@Override 
public void destroy() { 

} 

@Override 
public void init(FilterConfig filterConfig) throws ServletException {  
} 
} 

STEP 2：

まずあなたがフィルターBeanを作成する必要があり、あなたの春のセキュリティの設定クラスの追加で：

@Autowired 
private MyCorsFilter myCorsFilter; 


//CORS 
http.addFilterBefore(myCorsFilter, ChannelProcessingFilter.class); 

EDIT：この構成では想定してい あなたはangular2アプリで実行していますlocalhost：3000

Answer 2

あなたがSpring 4.2以降のリリースで作業している場合は、CORSのアウトオブボックスのファーストクラスサポートがあります。このpageを読んでください。

あなたはクラスレベルで次のアノテーションを定義することで、離れて得ることができる： @CrossOrigin(origins = "http://localhost:3000", maxAge = 3600)