Spring boot CORS 발생

Question

공부로 로그인 기능을 구현중인데 vue3를 프론트로 하고 Spring boot를 서버로 두고 있습니다. Spring Security는 프로젝트 생성 시 추가하지 않았으나 향후 학습 후 설정할 예정입니다.현재 vue3에서 아래와 같이 작성하였고 async login() { try { if (this.id && this.pw) { const loginData &#61; { id: this.id, password: this.pw }; const response &#61; await axios.post('/api/login/authentication', loginData); if (response.status &#61;&#61;&#61; 200) { alert('로그인 성공'); this.loginToken &#61; response.data.token; } else { alert(&#34;로그인 실패&#34;, response.status); // 로그인 실패 메시지 출력 } } else { alert(&#34;ID 또는 PW가 입력되지 않았습니다.&#34;); } } catch (error) { console.log(&#34;에러 발생:&#34;, error.message); } }컨트롤러의 경우 아래와 같습니다. &#64;RestController&#64;RequestMapping(&#34;/api/login&#34;)public class LoginController { &#64;Autowired private loginService loginService; &#64;PostMapping(&#34;/authentication&#34;) public ResponseEntity<LoginResponseDTO> login(&#64;RequestBody LoginRequestDTO loginDataObject) { // username과 password를 받아서 인증 처리 boolean isAuthenticated &#61; loginService.authenticateUser(loginDataObject); // 토큰 및 메세지 LoginResponseDTO loginResponseDTO &#61; loginService.loginResponse(isAuthenticated); return isAuthenticated ? ResponseEntity.ok(loginResponseDTO) // 200 OK : ResponseEntity.status(HttpStatus.UNAUTHORIZED).body(loginResponseDTO); // 401 Unauthorized }} LoginRequestDTO는 아래와 같습니다. &#64;Getter&#64;Setterpublic class LoginRequestDTO { private String id; private String password;} 그리고 발생한 CORS의 경우 이와 같습니다. 이를 해결하기 위해 서버쪽에 WebConfig 파일을 생성하여 아래와 같이 설정하였습니다. &#64;Configurationpublic class WebConfig implements WebMvcConfigurer { &#64;Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping(&#34;/api/**&#34;) // API 경로에 대해서만 CORS 설정 .allowedOrigins(&#34;http://localhost:3000&#34;) // 연결하려는 Vue 프로젝트 주소 .allowedMethods(&#34;GET&#34;, &#34;POST&#34;, &#34;PUT&#34;, &#34;DELETE&#34;, &#34;OPTIONS&#34;) // HTTP 메서드 처리 .allowedHeaders(&#34;Authorization&#34;, &#34;Content-Type&#34;, &#34;Accept&#34;) // 허용할 헤더 설정 .allowCredentials(true); // 자격 증명 허용 (쿠키, 인증 헤더 등) }} 그러나 해당 방법으로 해결되지 않아 &#64;CrossOrigin를 사용해보기도 했지만 해결되지 않았습니다. 오류가 변화하지 않는 것을 보아 변수 타입 불일치 같은 사소한 문제일 수도 있을 것 같은데 원인을 찾지 못하겠습니다.

코딩하는 두루미 · Answer

https://velog.io/@serajang99/CORS-pre-flight%EC%98%88%EB%B9%84-%EC%9A%94%EC%B2%AD소스는 좀 다르지만 참고 하시면 충분히 해결 가능하실 것 같습니다.

개발잡부 · Answer

Spring Boot 로그에서는 요청이 들어오긴 했나요? 아니면 아예 요청이 안들어왓나요?

RETURN NULL · Answer

지금 프론트가 8080으로 떠있는 것으로 보입니다. 보통 로컬에서 개발테스트 할땐 개발 프록시를 설정해서 백엔드 서버로 연결합니다.참고 https://alswo471.tistory.com/m/entry/Vuejs-3-Proxy-%EC%84%A4%EC%A0%95

Spring boot CORS 발생

3개의 답변

#vue3 목록