2017-03-07 3 views
3

저는 Angular 2 및 Spring Boot를 사용하여 개발중인 웹 응용 프로그램을 보유하고 있습니다. 내 리포지토리를 HTTP 끝점으로 노출하려면 spring-boot-data-rest 종속성을 사용합니다.Spring 데이터 나머지에서 교차 원점 요청 사용

개발하는 동안 포트 8080에서 실행되는 로컬 tomcat에서 내 백엔드 봄 부팅 프로젝트를 실행합니다. 프론트 엔드를 개발하기 위해 angle-cli를 사용하여 4200 포트에서 내 Angular 2 애플리케이션을 제공합니다. 4200

요청한 리소스에 '액세스 제어 허용 허용 원천'헤더가 없습니다. 왜냐하면, 8080에 노출 된 엔드 포인트를 공격 할 수 있어야하기 때문입니다. 따라서 원점 'http://localhost:4200'은 액세스 할 수 없습니다.

@RestController 
public class MyController { 
    @CrossOrigin(origins = "http://localhost:4200") 
    @RequestMapping(value = "/whatever") 
    public void whatever() { 
     //whatever 
    } 
} 

을하지만 난 분명히 spring-boot-data-rest에 의해 노출 된 내 엔드 포인트에 대해이 작업을 수행 할 수 없습니다이 내가 수동으로 @RestController에 입력 한 사용자 정의 엔드 포인트 인 경우

, 단순히 등의 @CrossOrigin 주석을 추가 할 수 있습니다. 그렇다면이 종단점을 http://localhost:4200 출처에서 액세스 할 수있게하려면 어떻게해야합니까?

+1

을; 최신 버전의 Spring Data를 사용하고 있다면 모든 것이 잘 될 것입니다 (http://stackoverflow.com/a/42403956/4922375). 그렇지 않으면 각 헤더를 각 응답에 설정하는 필터를 독자적으로 작성해야합니다 . – Andrew

답변

4

에 전 세계적으로 적용됩니다 나는 최근이 문제에 직면 한

/** 
* Filter for enabling CORS support. 
*/ 
@Component 
public class CorsFilter extends OncePerRequestFilter { 

    @Override 
    protected void doFilterInternal(final HttpServletRequest request, final HttpServletResponse response, 
            final FilterChain filterChain) throws ServletException, IOException { 
     response.addHeader("Access-Control-Allow-Origin", "*"); 
     response.addHeader("Access-Control-Allow-Methods", "GET, POST, DELETE, PUT, PATCH, HEAD, OPTIONS"); 
     response.addHeader("Access-Control-Allow-Headers", "Origin, Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers"); 
     response.addHeader("Access-Control-Expose-Headers", "Access-Control-Allow-Origin, Access-Control-Allow-Credentials"); 
     response.addHeader("Access-Control-Allow-Credentials", "true"); 
     response.addIntHeader("Access-Control-Max-Age", 10); 
     filterChain.doFilter(request, response); 
    } 
} 
0

CORS 요청을 사용하려면 다음 구성 요소를 사용할 수 있습니다. 그것은 내가 그것을 작동하도록 내 사용자 지정 CORS 필터를 사용한 응용 프로그램

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

    public SimpleCorsFilter() { 
    } 

    @Override 
    public void destroy() { 
    } 

    @Override 
    public void doFilter(final ServletRequest req, final ServletResponse res, final FilterChain chain) throws IOException, ServletException { 
    final HttpServletResponse response = (HttpServletResponse) res; 
    final HttpServletRequest request = (HttpServletRequest) req; 
    response.setHeader("Access-Control-Allow-Origin", "*"); 
    response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE"); 
    response.setHeader("Access-Control-Max-Age", "3600"); 
    response.setHeader("Access-Control-Allow-Headers", "x-requested-with, authorization, token"); 

    if ("OPTIONS".equalsIgnoreCase(request.getMethod())) { 
     response.setStatus(HttpServletResponse.SC_OK); 
    } else { 
     chain.doFilter(req, res); 
    } 
    } 

    @Override 
    public void init(final FilterConfig filterConfig) { 
    } 
}