@Configuration
public class CorsMvcConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry corsRegistry) {
corsRegistry.addMapping("/**")
.allowedOrigins("http://localhost:3000");
}
}
서버 단 Security CORS 설정 입니다.
const fetchData = async () => {
console.log(1);
try {
const response = await fetch('http://localhost:8081/api/pin');
if (!response.ok) {
throw new Error('Network response was not ok');
}
const data = await response.json();
console.log(data); // 서버에서 받은 데이터 출력
} catch (error) {
console.error('Error fetching data:', error);
}
};
프론트에서 보내는 요청입니다.
저희가 발생하는 오류는 다음과 같습니다.
localhost/:1 Access to XMLHttpRequest at ‘카카오계정’ (redirected from ‘http://localhost:8081/api/pin’) from origin ‘http://localhost:3000/’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
죄송합니다 주제가 약간 어긋난 것 같습니다. 일단 부탁하신 정보에 대한건, 프론트에서 인가코드를 요청하지 않고 바로 http://localhost:8081/login/oauth2/code/kakao 이 url로 get요청을 보냅니다.
그리고 이럴 경우에 서버에서도 db에 카카오에 신청한 유저 정보가 잘 저장되는 것을 확인 할 수 있었습니다.
문제는 이후에 success handler를 이용해서 localhost:3000/ 으로 리다이렉트를 하고 서버에 get요청을 했을 때에 해당하는 데이터 정보를 CORS에 의해 차단당해서 오류가 발생합니다. CORS 설정은 다 잘 되어 있는 것 같은데 계속 같은 오류가 발생합니다 ㅠㅠ 세션 정보도 쿠키안에서 확인할 수 있었습니다.
@RequiredArgsConstructor
@Service
@Slf4j
public class CustomOAuth2UserService implements OAuth2UserService<OAuth2UserRequest, OAuth2User> {
private final UserRepository userRepository;
private final HttpSession httpSession;
/**
* loadUser 메서드에서는 DefaultOAuth2UserService를 사용하여 OAuth2UserRequest에 대한 OAuth2User 객체를 로드합니다.
* 그러면 로그인하는 사용자의 공급자 등록 ID 및 사용자 이름 속성 이름과 같은 사용자 정보를 가져와서 OAuthAttributes 객체로 변환합니다.
*/
@Override
public OAuth2User loadUser(OAuth2UserRequest userRequest) throws OAuth2AuthenticationException {
OAuth2UserService<OAuth2UserRequest, OAuth2User> delegate = new DefaultOAuth2UserService();
OAuth2User oAuth2User = delegate.loadUser(userRequest);
String registrationId = userRequest.getClientRegistration().getRegistrationId();
String userNameAttributeName = userRequest.getClientRegistration().getProviderDetails().getUserInfoEndpoint().getUserNameAttributeName();
OAuthAttributes attributes = OAuthAttributes.of(registrationId, userNameAttributeName, oAuth2User.getAttributes());
User user = saveOrUpdate(attributes);
httpSession.setAttribute("user", user);
return new DefaultOAuth2User(
Collections.singleton(new SimpleGrantedAuthority("ROLE_MEMBER")),
attributes.getAttributes(),
attributes.getNameAttributeKey()
);
}
/**
* UserRepository 를 사용하여 OAuthAttributes 에서 가져온
* 사용자 정보를 데이터베이스에 저장하거나 업데이트합니다.
*/
private User saveOrUpdate(OAuthAttributes attributes) {
User user = userRepository.findBySocialId(attributes.getSocialId())
.map(entity -> entity.update(attributes.getNickname(),attributes.getImage(), Role.ROLE_MEMBER))
.orElse(attributes.toEntity());
return userRepository.save(user);
}
}
social login은 잘 동작을 하는 것 같은데 그 이후에 프론트에서 서버에 api를 요청을 할 때 오류가 발생합니다. 오류는 처음에 올렸던 것에서 확인하실 수 있습니다!
authorize 하면 카카오 계정 로그인 안되어 있을때 login 페이지 로 이동하는 것은 정상동작입니다.
그리고 a href로 인가코드요청하면 cors 발생하지 않습니다.
localhost:8081/oauth2/code/kakao 로 href 이동 후, 백엔드에서 302리다이렉트로 login 페이지로 이동해도 정상작동해야합니다.
