Spring起動Angular 2とAccess-Control-Allow-Originがサーバー上で動作しない

Question

私は、RestController、Springカスタムサービスからのデータを要求するカスタムセキュリティフィルタとAngular 2 Applicationを持つSpring Boot Appを持っています。

私は、ヘッダーを設定するフィルターを持っています。

これは、localhost：4200をlocalhost：8080に呼び出すと問題なく動作しますが、localhost：4200から一部のip xx.xx.xx.xx：8080には動作しません。

誰かがアイデアを持っていますか？

ここでは私のフィルタ：

@Component 
public class MyCorsFilter implements Filter { 

    public MyCorsFilter() { 
     System.out.println("init filter corsssss"); 
    } 

    @Override 
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException { 

     HttpServletRequest request = (HttpServletRequest) req; 
     HttpServletResponse response = (HttpServletResponse) res; 

     response.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin")); 
     response.setHeader("Access-Control-Allow-Credentials", "true"); 
     response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE"); 
     response.setHeader("Access-Control-Max-Age", "3600"); 
     response.setHeader("Access-Control-Allow-Headers", "Content-Type, Accept, X-Requested-With, remember-me"); 

     chain.doFilter(req, res); 
    } 

    @Override 
    public void init(FilterConfig filterConfig) { 
    } 

    @Override 
    public void destroy() { 
    } 
} 

Answer 1

私は同じproblemeを持っていました。

は、あなたのコントローラでこれを試してみてください：

@Context 
private HttpServletResponse servletResponse; 

private void allowCrossDomainAccess() { 
    if (servletResponse != null) { 
     servletResponse.setHeader("Access-Control-Allow-Origin", "*"); 
    } 
} 

は、その後、あなたのPOST/GET Methodeの中で：

@CrossOrigin 
@RequestMapping(value = "/login", method = RequestMethod.POST, consumes = "application/json") 
public boolean loginController(@RequestBody User user) throws JSONException, NoSuchAlgorithmException, UnsupportedEncodingException { 

    allowCrossDomainAccess(); 
    return userService.login(user); 
} 

敬具、

Answer 2

これがセキュリティ機能です。代わりに、春にあなたのコンテンツにアクセスすることができ、あなたがコントロールする必要がある任意の起源、許可の：あなたのapp.module.ts角度変化で、その後

import { HttpModule, XSRFStrategy, CookieXSRFStrategy } from '@angular/http'; 

export function xsrfFactory() { return new CookieXSRFStrategy('XSRF-TOKEN', 'x-xsrf-token'); } 
... 
    providers: [ 
    ... 
     { provide: XSRFStrategy, useFactory: xsrfFactory }, 
... 

この道を

@EnableWebSecurity 
public class WebSecurityConfig extends WebSecurityConfigurerAdapter { 
... 
@Override 
protected void configure(HttpSecurity http) throws Exception { 
    http.csrf().csrfTokenRepository(csrfTokenRepository()); 
} 
    ... 
@Bean 
public CsrfTokenRepository csrfTokenRepository() { 
    CookieCsrfTokenRepository repository = new CookieCsrfTokenRepository(); 
    repository.setHeaderName("X-XSRF-TOKEN"); 
    repository.setCookieHttpOnly(false); 
    return repository; 
} 

をあなたのREST呼び出しはクッキーを持っていますパラメータが添付されます。

代わりにあなただけのこの操作を行うことができます - 私はそれを示唆していないが、あなたは今、この権利を心配したくない場合は、それが役に立つかもしれない：

@Override 
protected void configure(HttpSecurity http) throws Exception { 
    http.csrf().disable(); 
}