CORS가 해결이 안됩니다... 제발 도와주세요

Question

Spring Security로 Google에서 사용자 정보를 가져온 뒤 직접 JWT 생성해서 client에게 보내주는 방식으로 작업하고 있습니다.Spring Security가 기본 제공하고 있는 로그인 URL인 http://localhost:8080/oauth2/authorization/google 를 client가 접속loadUser메소드로 사용자 정보 가져오기성공하면 /login으로 redirect한 뒤 service로직을 거쳐 access token생성client(react를 사용하는 front)에게 전달이런 과정인데 자꾸 cors 문제로 에러가 납니다.ㅠㅠㅠ 몇시간쨰 붙들고 있는지 모르겠네요Spring Security Configuration파일 에서 아래와 같습니다.package com.teamo.teamo.config; import com.teamo.teamo.filter.JwtFilter; import com.teamo.teamo.security.CustomOAuth2UserDetailService; import com.teamo.teamo.service.JwtService; import com.teamo.teamo.type.AuthType; import lombok.RequiredArgsConstructor; import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import org.springframework.security.config.annotation.web.builders.HttpSecurity; import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity; import org.springframework.security.config.http.SessionCreationPolicy; import org.springframework.security.web.SecurityFilterChain; import org.springframework.security.web.authentication.UsernamePasswordAuthenticationFilter; import org.springframework.web.cors.CorsConfiguration; import org.springframework.web.cors.CorsConfigurationSource; import org.springframework.web.cors.UrlBasedCorsConfigurationSource; import java.util.List; &#64;RequiredArgsConstructor &#64;EnableWebSecurity &#64;Configuration public class SecurityConfig { private final CustomOAuth2UserDetailService customOAuth2UserDetailService; private final JwtService jwtService; &#64;Bean public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception { http .csrf(csrf -> csrf.disable()) .cors(corsConfig -> corsConfig.configurationSource(corsConfigurationSource())) .httpBasic(httpbasic -> httpbasic.disable()) .sessionManagement(session -> session.sessionCreationPolicy(SessionCreationPolicy.NEVER)) .authorizeHttpRequests(autho -> { autho .requestMatchers(&#34;/auth/reissue&#34;, &#34;/swagger-ui/**&#34;, &#34;/swagger-resources/**&#34;,&#34;/oauth2/authorization/google&#34;).permitAll() .requestMatchers(&#34;/**/admin&#34;).hasRole(AuthType.ROLE_ADMIN.getKey()) .requestMatchers(&#34;/**/guest&#34;).hasAnyRole(AuthType.ROLE_USER.getKey(), AuthType.ROLE_ADMIN.getKey()) .anyRequest().permitAll(); // 개발 단계라서 }) .oauth2Login(oauth -> { oauth.userInfoEndpoint(end -> end.userService(customOAuth2UserDetailService)) .defaultSuccessUrl(&#34;/auth/login&#34;) .failureUrl(&#34;/fail&#34;); }) .addFilterBefore(new JwtFilter(jwtService), UsernamePasswordAuthenticationFilter.class); return http.build(); } /* CORS 허용*/ &#64;Bean public CorsConfigurationSource corsConfigurationSource() { final CorsConfiguration configuration &#61; new CorsConfiguration(); configuration.setAllowedOriginPatterns(List.of(&#34;*&#34;)); configuration.setAllowedMethods(List.of(&#34;HEAD&#34;, &#34;GET&#34;, &#34;POST&#34;, &#34;PUT&#34;, &#34;DELETE&#34;, &#34;PATCH&#34;, &#34;OPTIONS&#34;)); configuration.setAllowCredentials(true); configuration.setAllowedHeaders(List.of(&#34;*&#34;)); final UrlBasedCorsConfigurationSource source &#61; new UrlBasedCorsConfigurationSource(); source.registerCorsConfiguration(&#34;/**&#34;, configuration); return source; } } 이걸로 안되서 WebConfig도 생성해서 지정해보았습니다.&#64;Configuration public class WebConfig implements WebMvcConfigurer { &#64;Override public void addCorsMappings(CorsRegistry registry) { registry .addMapping(&#34;/**&#34;) .allowedMethods(&#34;*&#34;); } }추가로 OPTIONS method 로 들어오는 pre-flight call 에서 토큰인증이 실패하여 401 오류와 함께 CORS 오류가 일어나게 됩니다.이는, /check/token 과정을통해 security context 설정 후 request matcher를 하는 과정이 진행되는데 이보다 더 앞단계에서 토큰헤더를 포함하지 않는 OPTIONS method에 대해 검증해제 로직이 들어가야하는데, SecurityConfig는 그보다 더 늦게 로직이 동작하는것으로 파악됩니다.라는 말을 보아서 filter도 추가해주었습니다.package com.teamo.teamo.filter; import jakarta.servlet.*; import jakarta.servlet.http.HttpServletRequest; import jakarta.servlet.http.HttpServletResponse; import org.springframework.core.Ordered; import org.springframework.core.annotation.Order; import org.springframework.stereotype.Component; import java.io.IOException; &#64;Component &#64;Order(Ordered.HIGHEST_PRECEDENCE) public class CorsFilter implements Filter { &#64;Override public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException { HttpServletResponse response &#61; (HttpServletResponse) res; HttpServletRequest request &#61; (HttpServletRequest) req; response.setHeader(&#34;Access-Control-Allow-Origin&#34;, &#34;*&#34;); response.setHeader(&#34;Access-Control-Allow-Credentials&#34;, &#34;true&#34;); response.setHeader(&#34;Access-Control-Allow-Methods&#34;,&#34;*&#34;); response.setHeader(&#34;Access-Control-Max-Age&#34;, &#34;3600&#34;); response.setHeader(&#34;Access-Control-Allow-Headers&#34;, &#34;Origin, X-Requested-With, Content-Type, Accept, Key, Authorization&#34;); if (&#34;OPTIONS&#34;.equalsIgnoreCase(request.getMethod())) { response.setStatus(HttpServletResponse.SC_OK); } else { chain.doFilter(req, res); } } } 혹시 가늠가는 것이 있으실까요 ㅠㅠ 진짜 살려주세요 ㅠㅠ

crnmst · Answer

CORS (Cross-Origin Resource Sharing) 문제를 해결하는 것은 종종 복잡할 수 있습니다. 보시는 바와 같이 여러 시도를 해보셨지만 문제가 해결되지 않는다고 하셔서 조금 더 도움을 드리겠습니다.SecurityConfig에서 CorsFilter 사용 안 함: SecurityConfig에서 CorsFilter를 사용하지 않도록 수정하겠습니다. 이미 CorsConfigurationSource를 구성해놨기 때문에 이 부분은 필요하지 않을 것으로 보입니다.javaCopy code@Bean public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception { http // ... (다른 설정들) .cors(corsConfig -> corsConfig.configurationSource(corsConfigurationSource())) // ... (다른 설정들) }WebConfig에서 addCorsMappings 수정: WebConfig에서 CORS 관련 설정을 다음과 같이 수정해보세요.javaCopy code@Configuration public class WebConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry .addMapping("/**") .allowedOrigins("*") // 모든 Origin 허용, 필요에 따라 필요한 Origin을 설정할 수도 있습니다. .allowedMethods("*") // 모든 HTTP 메서드 허용 .allowedHeaders("*") // 모든 헤더 허용 .allowCredentials(true); // 자격 증명 허용 (즉, 인증된 요청 허용) } }JwtFilter에서 응답 헤더에 CORS 설정 추가: JwtFilter에서도 CORS 관련 설정을 추가해보겠습니다.javaCopy code@Component @Order(Ordered.HIGHEST_PRECEDENCE) public class JwtFilter implements Filter { @Override public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException { HttpServletResponse response = (HttpServletResponse) res; HttpServletRequest request = (HttpServletRequest) req; response.setHeader("Access-Control-Allow-Origin", "*"); // 모든 Origin 허용, 필요에 따라 필요한 Origin을 설정할 수도 있습니다. response.setHeader("Access-Control-Allow-Credentials", "true"); // 자격 증명 허용 (즉, 인증된 요청 허용) response.setHeader("Access-Control-Allow-Methods", "HEAD, GET, POST, PUT, DELETE, PATCH, OPTIONS"); // 허용할 HTTP 메서드 목록 response.setHeader("Access-Control-Max-Age", "3600"); // Preflight 요청에 대한 캐시 유지 시간 response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Key, Authorization"); // 허용할 헤더 목록 if ("OPTIONS".equalsIgnoreCase(request.getMethod())) { response.setStatus(HttpServletResponse.SC_OK); } else { chain.doFilter(req, res); } } }서버 재시작: 설정을 변경한 뒤에는 서버를 재시작하시고, 클라이언트 측에서도 재시작하거나 캐시가 남아있을 수 있으므로 웹 브라우저 캐시를 지워보세요.위의 설정을 추가/수정한 뒤에도 CORS 문제가 지속된다면, 추가적으로 다음을 확인해볼 수 있습니다.클라이언트 측 코드에서 요청을 보낼 때, 적절한 헤더가 설정되어 있는지 확인합니다. (예: Authorization 헤더에 JWT 토큰이 올바르게 포함되어 있는지)CORS 이슈가 해당 요청 뿐만 아니라 다른 요청에도 발생하는지 확인합니다.서버 로그를 확인하여 어떤 오류 메시지가 발생하는지 확인합니다.이러한 점들을 확인해보시고 여전히 문제가 발생한다면 추가 정보를 주시면 더 정확한 도움을 드릴 수 있을 것입니다. CORS 문제 해결은 환경에 따라 조금씩 차이가 있을 수 있으며, 위의 설정이 모든 상황을 커버하지 못할 수 있습니다. 따라서 추가 정보가 필요한 경우에는 더 자세한 내용을 알려주시면 감사하겠습니다!

하얀뼈 · Answer

구글 오어스 설정에서 리다이렉트url을 localhost대신 http://내아이피:리액트포트 로 바꿔적고,리액트 프로젝트 실행할때도 로컬호스트대신 아이피로 리액트 접속하세요

matinKim · Answer

/test로 들어갈 때는 CORS문제가 발생하지 않고 /oauth2/authorization/google 에 접속할 떄만 CORS문제가 발생합니다. 정말 원인이 뭘까요?? 중간에 Redirect가 일어나서는 안되는 건가요....?

SSsssSS · Answer

wildcard로 설정하지마시고 cors 허용할 url을 설정해주세요로컬이라면 포트까지 포함해서요

matinKim · Answer

login:1 Access to XMLHttpRequest at 'https://accounts.google.com/o/oauth2/v2/auth?response_type=code&client_id=540387287516-6btm2k5aor9ish6d8ehjg66vmmuiq30a.apps.googleusercontent.com&scope=email%20profile&state=-G57KgCmTRTB0iUcYuLqm71OsZaFXNJhydEY-AOz2k4%3D&redirect_uri=http://localhost:8080/login/oauth2/code/google' (redirected from 'http://localhost:8080/oauth2/authorization/google') from origin 'https://teamo-frontend-r5lll9xh3-cwonseo.vercel.app' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.에러 메시지가 위와 같은데 oauth2/authorization/google 을 보내고 google로그인 페이지를 받기 위해 account.google.com 을 받을 때 CORS가 발생하는 것 같습니다.. 이를 예방하려면 어떤 방식으로 해야할까요?

tnuren · Answer

안녕하세요 저도 같은 고민을 하다가 해결하긴했는데 근본적인 해결이 아니라 살짝 야매로 해결했는데 이거라도 한번 봐보시겠어요? 도움이 됐으면 좋게습니다! https://coder-bae.tistory.com/entry/CORS-CORS-%EB%9E%80-CORS-%ED%95%B4%EA%B2%B0

GOMGGE · Answer

SSL 인증서는 발급받은건가요?단순히 로컬에서 테스트하는거는 https://i5i5.tistory.com/m/935 이글보고 고쳐지긴해요

カワウソ · Answer

https://developers.google.com/identity/protocols/oauth2/javascript-implicit-flowSince this OAuth 2.0 endpoint does not support Cross-Origin Resource Sharing (CORS), the snippet creates a form that opens the request to that endpoint.프론트엔드 코드가 무엇인지 알 수 없지만 위 오류로 보면 로컬호스트에서 accounts.google.com 으로의 XHR를 수행하는 것으로 보입니다. 프론트엔드 개발자에게 위 링크를 공유하여 폼 전송으로 실질적인 리다이렉트를 할 수 있도록 하세요. 오키에서 OAuth 연동 시 페이지가 전환되어 처리되는 이유를 생각해보시면 됩니다.

matinKim · Answer

일단 프로젝트 완성이 시급해서 코드를 아예 고쳐 [access token은 query로, refresh token은 cookie로 전달하는 방식 &#43; axios가 아니라 href로 요청하는 방식]으로 고쳐 cors를 회피하였습니다.그런데 이전에도 href로 바로 이동하였을 때는 cors 문제가 발생하지 않았거든요. axios로만 하면 오류가 나는 이유가 뭘까요? 사실 이번 방법도 axios로 하면 cors가 떠서 찝찝하네요

작별왕바이킹 · Answer

public class CorsFilter implements Filter { &#64;Override public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException { HttpServletResponse response &#61; (HttpServletResponse) res; HttpServletRequest request &#61; (HttpServletRequest) req; if (org.springframework.web.corsCorsUtils.isPreFlightRequest(request)) { response.setStatus(HttpServletResponse.SC_OK); } else { response.setHeader(&#34;Access-Control-Allow-Origin&#34;, &#34;*&#34;); response.setHeader(&#34;Access-Control-Allow-Credentials&#34;, &#34;true&#34;); response.setHeader(&#34;Access-Control-Allow-Methods&#34;,&#34;*&#34;); response.setHeader(&#34;Access-Control-Max-Age&#34;, &#34;3600&#34;); response.setHeader(&#34;Access-Control-Allow-Headers&#34;, &#34;Origin, X-Requested-With, Content-Type, Accept, Key, Authorization&#34;); } chain.doFilter(req, res); } }preflight reponse 헤더에는 'Access-Control-Allow-Origin' 있으면 안돼요.

꿀잠자고싶다 · Answer

@CrossOrigin(origins = "http://아이피주소:포트") 넣어도 안되나요?

lwy**** · Answer

자바스크립트 정책을 보면 답을 알 수 있습니다.웹 애플리케이션 보안 모델에서 중요한 개념 중 하나가 동일 출처 정책(Same-Origin Policy)에요이 정책에 의해서 자바스크립트(XMLHttpRequest) &#61;> ajax 나 axios로 타 도메인을 요청할 시 해당 에러가 발생합니다. 즉 그 페이지와 같은 서버에 있는 주소로만 ajax나 axios를 호출해야 하지요.즉 님이 만든 사이트가 있고, 네이버나 구글이 특정 api를 만들어 놨다고 칩시다. 님이 구글이나, 네이버라고 치고 호출하는 쪽이 어떤 해킹 사이트인지 출처를 알 수 없는 곳에서 님 쪽에 api를 호출했을때 그 검증도 안된 사이트에게 정보를 리턴해준다는건 위험한거지요. 그래서 발생되는 개념입니다. 같은 서버에서만 허용하는걸로 다만 그걸 예외적으로 특정 url등에 예외처리를 걸어줌으로 해결하거나, 프록시 서버를 두고 서버에서 호출하거나 해서 해결하지요. 님이 크로스 오리진 설정을 해놓은건 상대방 url을 예외처리로 해놓은것 같은데, 저 문제를 해결 하려면 구글쪽 서버에 님 url을 예외처리 해놔야 님이 호출할때 cors가 안나오겠지요.

CORS가 해결이 안됩니다... 제발 도와주세요

12개의 답변

기술 목록