react fetch Header 설정시 , Host 가 없어집니다.

Question

해당 fetch 를 통해서 요청을 했습니다. Headers 에 Content-Type 만 정의했을때는 무리없이 Mapping 이 잘 됩니다 . 그런데 그외에 AuthHeader 라던가 X-Custom 헤더등을 넣으면 통신이 제대로 안됩니다. 보니까 요청이 두번가는데 , 첫번째 요청에서는 fetch cors 이며 , 두번째요청은 200인데 preflight 입니다... 다음의 사진은 첫번째 fetch cors 오류날때의 네트워크 요청탭과 두번째 preflight 탭의 네트워크 요청탭입니다.개발환경은 react : localhost:3000 / 이고 , spring boot 192.168.127.22:8080/ tomcat 입니다. 동일 프로젝트에서 다른 ajax 통신은 무리없이 잘 하고있었는데 로그인 구현하면서 header 를 건드는 일이 생기니까 이런 문제가 생기네요 무슨 문제일까요.. 도저히 답이 안잡히네요

kenu,전독시 · Answer

https://developer.mozilla.org/ko/docs/Web/HTTP/CORS이 문서 찬찬히 읽어보시면 좋습니다.추가되는 헤더는 preflight에서 승인을 받아야 됩니다.

하루의_spring · Answer

커스텀 헤더를 넣으면 cors 설정에서 커스텀 헤더를 받을 수 있게 설정을 해주어야 합니다 @Component @Order(Ordered.HIGHEST_PRECEDENCE) public class CustomCorsFilter extends OncePerRequestFilter { @Value("${application.front.server}") private String front_server; @Override protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain filterChain) throws ServletException, IOException { response.setHeader("Access-Control-Allow-Origin", front_server); response.setHeader("Access-Control-Allow-Credentials", "true"); response.setHeader("Access-Control-Allow-Methods", "POST, GET, PUT, OPTIONS, DELETE"); response.setHeader("Access-Control-Max-Age", "3600"); response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Authorization, x-xsrf-token , Authorization_Refresh" ); response.setHeader("Access-Control-Expose-Headers", "Authorization , Authorization_Refresh"); // allow cros preflight if ("OPTIONS".equalsIgnoreCase(request.getMethod())) { response.setStatus(HttpServletResponse.SC_OK); } else { filterChain.doFilter(request, response); } } } 저같은 경우는 이렇게 filter 작성하고 setHeader Access-Control-Expose-Headers 를 따로 작성해서 custom-header 를 받을 수 있게 했습니다

react fetch Header 설정시 , Host 가 없어집니다.

2개의 답변

#http 목록