6 글 보임 - 1 에서 6 까지 (총 6 중에서)
-
글쓴이글
-
2024년 3월 28일 15:57 #118112
CHAEYULL참가자회원가입 기능까지는 다 작동이 되는데 로그인 부분에서 에러가 계속 생깁니다 //서버로 보낼 데이터 선언 let [username, setUsername] = useState(""); let [password, setPassword] = useState("") let data = { username : username, password : password } //서버로 데이터 보내는 함수 function login(){ fetch("/api/login", { method : 'POST', headers: { 'Content-Type': 'application/json' // JSON 형식으로 설정 }, body : JSON.stringify(data) // JSON 형식으로 변환하여 전송 }) .then((r)=>{return r.text()}) .then((r)=>{ console.log(r) location.replace("/"); }) .catch((e)=>{ console.log(`에러남${e}`); }) } //컴포넌트 내용 <div> <form onSubmit={login}> <h3> 로그인</h3> <br/> <h4> 아이디 : <input name="username" onChange={(e)=>{setUsername(e.target.value)}}/></h4> <h4> 비밀번호 : <input name="password" onChange={(e)=>{setPassword(e.target.value)}}/></h4> <br/> <button type="submit">로그인</button> </form> <br/><br/> <Link>비밀번호를 잊어 버리셨나요?</Link> <br/><br/> <Link to="/register">아직 계정이 없으신가요?</Link> </div> //스프링 SecurityConfig 내용 @Bean public SecurityFilterChain filterChain(HttpSecurity http) throws Exception { http.csrf((csrf)->csrf.disable()); http.authorizeHttpRequests((authorize)-> authorize.requestMatchers("/**").permitAll() ); http.formLogin((formLogin) -> formLogin.loginPage("/login") .loginProcessingUrl("/api/login") .usernameParameter("username") .defaultSuccessUrl("http://localhost:3000/") ); http.logout(logout -> logout.logoutUrl("/api/logout")); return http.build(); } 이틀째 해결을 못하고있습니다 한 번만 구제 부탁드립니다 ㅠㅠ2024년 3월 28일 19:15 #118130
codingapple키 마스터let formData = new FormData(); formData.append('username', '아이디'); formData.append('password', '패스워드'); fetch("/login", { method : 'POST', body : formData }) 로 폼입력값처럼 보내봅시다2024년 3월 28일 20:49 #118152
CHAEYULL참가자let [username, setUsername] = useState(""); let [password, setPassword] = useState("") let formData = new FormData(); formData.append('username', username ) formData.append('password', password ) function login(){ fetch("/login", { method : 'POST', body : formData }) .then((r)=>{return r.text()}) .then((r)=>{ console.log(r) location.replace("/"); }) .catch((e)=>{ console.log(`에러남${e}`); }) } 이렇게해도 안되는것같습니다 ㅠㅠ 콘솔에도 아무 에러 메시지도 안나와있어서 멘붕입니다요 혹시 프록시 설정을const { createProxyMiddleware } = require('http-proxy-middleware');module.exports = function(app) { app.use( '/*', createProxyMiddleware({ target: 'http://localhost:8080', changeOrigin: true, }) ); }; 이렇게 하고 package.json 에 "proxy": "http://localhost:8080",를 추가했는데 이 부분에서 문제가 생긴걸까요?2024년 3월 29일 09:35 #118212
codingapple키 마스터http://localhost:8080/login으로 요청해봅시다 fetch쓸거면 아마 credentials : 'include' 설정도 넣어야할걸요
2024년 3월 29일 10:21 #118215
CHAEYULL참가자fetch에 mode: 'cors', 이것도 넣고 onSubmit 이 아니라 onClick 으로 했더니 해결되었습니다 ㅠㅠ 근데 로그아웃 부분에서 또 문제가 있는데 //로그아웃 함수 function logout(){ fetch("/logout", { method : 'POST', mode: 'cors', credentials : 'include', }) .then((r)=>{return r.text()}) .then((r)=>{ // location.replace("/") // console.log(r) }) .catch((e)=>{ console.log(`로그아웃 실패 ${e}`) }) } //로그아웃 버튼 <S.logout onClick={logout}>로그아웃</S.logout> //스프링 로그아웃 부분 http.logout(logout -> logout.logoutUrl("/logout")); 이렇게 했는데 콘솔에는 Header.js:10 GET http://localhost:8080/login?logout 404 (Not Found) 이렇게 나오는데 저는 분명히 /logout으로 요청을 날렸는데 왜 /login?logout 여기로 가는지 모르겠습니다 ㅠㅠ -
글쓴이글
6 글 보임 - 1 에서 6 까지 (총 6 중에서)
- 답변은 로그인 후 가능합니다.