Junit Test Application-42-CORS 확인

jaegeunsong97·2023년 8월 10일

CSR 기반 JUnit5 Bank-Application

목록 보기

42/56

Junit Bank Application 깃허브

Junit Bank Application 기록 노션

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
     <h1>로그인 페이지</h1>
     <hr>
     <form>
          <input type="text" id="username"><br/>
          <input type="password" id="password"><br/>
          <button type="button" onclick="login()">로그인</button>
     </form>

     <script>
          // async: await 지점 기억, login 함수 스택을 빠져나와라
          async function login() {
               let userDto = {
                    username:document.querySelector("#username").value,
                    password:document.querySelector("#password").value
               }
               console.log(userDto)

               let userJson = JSON.stringify(userDto);
               console.log(userJson);

               // 통신이기 떄문에 시간이 걸림
               let r1 = await fetch("http://localhost:8081/api/login", {
                    method: "post",
                    body: userJson,
                    headers: {
                         "Content-Type":"application/json; charset=utf-8"
                    }
               });
               console.log("Authorization", r1.headers.get("Authorization"));
               let token = r1.headers.get("Authorization");
               localStorage.setItem("Item", token);

               sessionStorage.setItem("token", token);

               let r2 = await r1.json();
               console.log(r2);
          }
          // 빠져나옴(async) -> login 함수 내부에 있는 값들을 메모리에 복사해뒤야 함(캡처링)
     </script>
</body>
</html>

public CorsConfigurationSource configurationSource() {
          log.debug("디버그 : CorsConfigurationSource cors 설정이 SecurityFilterChain에 등록됨");
          CorsConfiguration configuration = new CorsConfiguration();
          configuration.addAllowedHeader("*"); // 모든 헤더 받기
          configuration.addAllowedMethod("*"); // GET, POST, DELETE, PUT 전부 허용
          configuration.addAllowedOriginPattern("*"); // 모든 IP 주소 허용 (FE IP만 허용)
          configuration.setAllowCredentials(true); // 클라이언트쪽에서 쿠키 요청 허용(클라이언트쪽에서 보내는게 가능)
          configuration.addExposedHeader("Authorization");
          UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
          source.registerCorsConfiguration("/**", configuration); // 모든 주소요청에 위에 설정을 넣기
          return source;
     }