스프링 부트 스프링 시큐리티 403 에러

Question

현재 컴퓨터 한 대에서 , 프론트와 백엔드 서버를 같이 localhost로 돌려서 웹 사이트의 회원가입 기능을 구현하고자 하는 상태입니다.회원가입과 관련한 js파일이 login.js, signup.js가 있고, java파일로는 SecurityConfig.java, UserController.java, WebConfig.java, CorsConfig.java 가 있습니다.react 서버와 스프링 부트 서버를 run하고, 회원가입 창에서 데이터를 입력하고 버튼을 누르면, 회원가입 중 오류가 발생했습니다. 오류가 뜨는데, 해결방안을 알려주세요. 이 문제로 진짜 스트레스 받네요..(스프링 스큐리티 관련 문제라는데, 대체 어느 코드가 잘못된 건지 모르겠습니다.)UserController.java package com.mysite.demo1; import lombok.RequiredArgsConstructor; import org.springframework.dao.DataIntegrityViolationException; import org.springframework.http.HttpStatus; import org.springframework.http.ResponseEntity; import org.springframework.stereotype.Controller; import org.springframework.validation.BindingResult; import org.springframework.web.bind.annotation.*; import org.springframework.web.bind.annotation.CrossOrigin; import jakarta.validation.Valid; import java.util.Map; @CrossOrigin(origins = "http://localhost:3000") @RequiredArgsConstructor //@Controller 내가 수정한 코드 3-2 @RestController @RequestMapping("/api") public class UserController { private final UserService userService; //내가 추가한 코드 3 // JSON 요청을 처리하는 새로운 회원가입 메서드 추가 @CrossOrigin(origins = "http://localhost:3000") @PostMapping("/signup") //@ResponseBody public ResponseEntity signup(@RequestBody UserCreateForm userCreateForm) { if (!userCreateForm.getPassword1().equals(userCreateForm.getPassword2())) { return ResponseEntity.badRequest().body(Map.of("error", "2개의 비밀번호가 일치하지 않습니다.")); } try { userService.create(userCreateForm.getUsername(), userCreateForm.getEmail(), userCreateForm.getPassword1()); } catch (DataIntegrityViolationException e) { return ResponseEntity.status(HttpStatus.CONFLICT).body(Map.of("error", "이미 등록된 사용자입니다.")); } catch (Exception e) { return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body(Map.of("error", e.getMessage())); } return ResponseEntity.ok().body(Map.of("message", "회원가입 성공")); } // // @GetMapping("/signup") // public String signup(UserCreateForm userCreateForm) { // return "signup_form"; // } // // @PostMapping("/signup") // public String signup(@ModelAttribute("userCreateForm") @Valid UserCreateForm userCreateForm, BindingResult bindingResult){ // if(bindingResult.hasErrors()){ // return "signup_form"; // } // // if(!userCreateForm.getPassword1().equals(userCreateForm.getPassword2())) // { // bindingResult.rejectValue("password2", "passwordInCorrect", "2개의 비밀번호가 일치하지 않습니다."); // return "signup_form"; // } // try {//회원가입 시 생성 및 회원가입 오류시 메시지 출력. // userService.create(userCreateForm.getUsername(), userCreateForm.getEmail(), userCreateForm.getPassword1()); // }catch(DataIntegrityViolationException e) { // e.printStackTrace(); // bindingResult.reject("signupFailed", "이미 등록된 사용자입니다."); // return "signup_form"; // }catch(Exception e) { // e.printStackTrace(); // bindingResult.reject("signupFailed", e.getMessage()); // return "signup_form"; // } // return "redirect:/"; // } } SecurityConfig.java package com.mysite.demo1; import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import org.springframework.security.authentication.AuthenticationManager; import org.springframework.security.config.annotation.authentication.configuration.AuthenticationConfiguration; import org.springframework.security.config.annotation.web.builders.HttpSecurity; import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity; import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder; import org.springframework.security.crypto.password.PasswordEncoder; import org.springframework.security.web.SecurityFilterChain; import org.springframework.security.web.header.writers.frameoptions.XFrameOptionsHeaderWriter; import org.springframework.security.web.util.matcher.AntPathRequestMatcher; import org.springframework.web.cors.CorsConfiguration; import org.springframework.web.cors.CorsConfigurationSource; import org.springframework.web.cors.UrlBasedCorsConfigurationSource; import org.springframework.security.config.annotation.web.configurers.AbstractHttpConfigurer; import java.util.List; @Configuration @EnableWebSecurity public class SecuirtyConfig { //cors 설정을 위해서 명시적으로 클래스도 만들고 따로 설정함. private final CorsConfigurationSource corsConfigurationSource; public SecuirtyConfig(CorsConfigurationSource corsConfigurationSource) { this.corsConfigurationSource = corsConfigurationSource; } @Bean SecurityFilterChain filterChain(HttpSecurity http) throws Exception { http .csrf(AbstractHttpConfigurer::disable) .cors(cors -> cors.configurationSource(corsConfigurationSource)) // 새로운 방식으로 CORS 설정 적용 .authorizeHttpRequests(authz -> authz .requestMatchers("/error","/","/api/signup").permitAll() // /api/signup 경로 허용 .anyRequest().authenticated() // 나머지 요청은 인증 필요 ) .headers((headers)-> headers .addHeaderWriter(new XFrameOptionsHeaderWriter( XFrameOptionsHeaderWriter.XFrameOptionsMode.SAMEORIGIN )))//프레임 구조에 대한 해결. ; return http.build(); } @Bean PasswordEncoder passwordEncoder() { return new BCryptPasswordEncoder(); } @Bean AuthenticationManager authenticationManager(AuthenticationConfiguration authenticationConfiguration) throws Exception { return authenticationConfiguration.getAuthenticationManager(); } } CorsConfig.java package com.mysite.demo1; import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import org.springframework.web.cors.CorsConfiguration; import org.springframework.web.cors.UrlBasedCorsConfigurationSource; import org.springframework.web.cors.CorsConfigurationSource; import java.util.List; @Configuration public class CorsConfig { @Bean public CorsConfigurationSource corsConfigurationSource() { CorsConfiguration configuration = new CorsConfiguration(); configuration.setAllowedOriginPatterns(List.of("*")); // 모든 도메인 허용 configuration.setAllowedMethods(List.of("GET", "POST", "PUT", "DELETE","OPTIONS")); // 모든 메소드 허용 configuration.setAllowedHeaders(List.of("*")); // 모든 헤더 허용 configuration.setAllowCredentials(true); // 자격 증명 허용 UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(); source.registerCorsConfiguration("/**", configuration); // 모든 경로에 대해 적용 return source; } }WebConfig.java package com.mysite.demo1; import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.config.annotation.CorsRegistry; import org.springframework.web.servlet.config.annotation.EnableWebMvc; import org.springframework.web.servlet.config.annotation.WebMvcConfigurer; @EnableWebMvc @Configuration public class WebConfig implements WebMvcConfigurer {//CORS에 대한 추가 설정. @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") .allowedOrigins("http://localhost:3000") // React 앱의 주소 .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS") .allowedHeaders("*") .allowCredentials(true); } } signup.js // src/components/Signup.js import React, { useState } from 'react'; import { useNavigate } from 'react-router-dom'; import Card from './ui/Card'; import Input from './ui/Input'; import Button from './ui/Button'; function Signup() { const [formData, setFormData] = useState({ email: '', password: '', confirmPassword: '', name: '' }); const navigate = useNavigate(); const handleChange = (e) => { const { name, value } = e.target; setFormData(prev => ({ ...prev, [name]: value })); }; // const handleSubmit = async (e) => { e.preventDefault(); try { const response = await fetch("http://localhost:8080/api/signup", { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ email: formData.email, password: formData.password, name: formData.name, }), }); if (response.ok) { // 응답이 성공적인 경우에만 JSON을 읽음 const data = await response.json(); alert('회원가입이 완료되었습니다.'); navigate('/'); } else { // 응답이 실패한 경우 let errorMessage = '회원가입 중 오류가 발생했습니다.'; if (response.headers.get('content-type')?.includes('application/json')) { // 응답이 JSON 형식인 경우에만 본문을 읽음 const errorData = await response.json(); errorMessage = errorData.message || errorMessage; } else { console.error('서버 응답이 JSON이 아님'); } alert(errorMessage); } } catch (error) { console.error('회원가입 중 오류가 발생했습니다:', error); alert('서버에 연결할 수 없습니다.'); } }; // // const handleSubmit = (e) => { // e.preventDefault(); // if (formData.password !== formData.confirmPassword) { // alert('비밀번호가 일치하지 않습니다.'); // return; // } // // // 로컬 스토리지에서 기존 사용자 정보 가져오기 // const existingUsers = JSON.parse(localStorage.getItem('users')) || []; // // // 이미 가입된 이메일인지 확인 // const userExists = existingUsers.find(user => user.email === formData.email); // if (userExists) { // alert('이미 가입된 이메일입니다.'); // return; // } // // // 새로운 사용자 추가 // const newUser = { // email: formData.email, // password: formData.password, // name: formData.name // }; // existingUsers.push(newUser); // localStorage.setItem('users', JSON.stringify(existingUsers)); // // alert('회원가입이 완료되었습니다.'); // navigate('/'); // }; return (

회원가입

); } export default Signup;login.js // src/components/Login.js import React, { useState } from 'react'; import { useNavigate } from 'react-router-dom'; import Card from './ui/Card'; import Input from './ui/Input'; import Button from './ui/Button'; function Login({ onLogin }) { const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); const navigate = useNavigate(); //내가 추가한 코드2번 const handleSubmit = async (e) => { e.preventDefault(); try { const response = await fetch('http://localhost:8080/api/login', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ email, password }), }); if (response.ok) { const userData = await response.json(); onLogin({ email: userData.email, name: userData.name }); navigate('/'); } else { alert('이메일 또는 비밀번호가 틀렸습니다.'); } } catch (error) { console.error('로그인 중 오류가 발생했습니다:', error); alert('(로그인 오류)서버에 연결할 수 없습니다.'); } }; // // const handleSubmit = (e) => { // e.preventDefault(); // // 로컬 스토리지에서 사용자 정보 가져오기 // const existingUsers = JSON.parse(localStorage.getItem('users')) || []; // // const user = existingUsers.find( // user => user.email === email && user.password === password // ); // // if (user) { // onLogin({ email: user.email, name: user.name }); // navigate('/'); // } else { // alert('이메일 또는 비밀번호가 틀렸습니다.'); // } // }; return (

스프링 부트 스프링 시큐리티 403 에러

1개의 답변

Q&A 목록