리액트로 로그인 기능 구현

[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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;로그인</h3>
<br/>
<h4>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;아이디 : <input name="username" onChange={(e)=>{setUsername(e.target.value)}}/></h4>
<h4>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;비밀번호 : <input name="password" onChange={(e)=>{setPassword(e.target.value)}}/></h4>
<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<button type="submit">로그인</button>
</form>
 
<br/><br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<Link>비밀번호를 잊어 버리셨나요?</Link>
<br/><br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<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();
}
이틀째 해결을 못하고있습니다 한 번만 구제 부탁드립니다 ㅠㅠ

[codingapple]

let formData = new FormData();
formData.append('username', '아이디');
formData.append('password', '패스워드');
fetch("/login", {
   method : 'POST',
   body : formData
})
로 폼입력값처럼 보내봅시다

[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",를 추가했는데 이 부분에서 문제가 생긴걸까요?

[codingapple]

http://localhost:8080/login으로 요청해봅시다 fetch쓸거면 아마 credentials : 'include' 설정도 넣어야할걸요

[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 여기로 가는지 모르겠습니다 ㅠㅠ

[codingapple]

로그아웃성공시 그 페이지로 자동으로 보내줄걸요 아마 바꿀 수 있습니다

[글쓴이]

글