인프런 커뮤니티 질문&답변
작성한 질문수
Vue -> Spring : axios.post 시 403 에러 (axios.get은 작동)
작성
·
1.8K
·
수정됨
0
FrontTest.vue
SimpleController.java
vue.config.js
Click 버튼 클릭 시 axios.get 실행 -> 1 입력 후 Click 버튼 클릭 시 one 출력 잘됨
PostClick 버튼 클릭 시 axios.post 실행-> 1 입력 후 PostClick 버튼 클릭 시 아래 403 에러 발생
[왼쪽 에러 내용]
Uncaught runtime errors:
ERROR
Request failed with status code 403 at createError (webpack-internal:///./node_modules/axios/lib/core/createError.js:16:15) at settle (webpack-internal:///./node_modules/axios/lib/core/settle.js:18:12) at XMLHttpRequest.handleLoad (webpack-internal:///./node_modules/axios/lib/adapters/xhr.js:55:7)
[오른쪽 에러 내용]
Failed to load resource: the server responded with a status of 403 (Forbidden)
createError.js:16 Uncaught (in promise) Error: Request failed with status code 403
at createError (createError.js:16:15)
at settle (settle.js:18:12)
at XMLHttpRequest.handleLoad (xhr.js:55:7)
axios.get 요청은 잘 작동하는데 axios.post 요청은 에러가 나는 원인이 뭘까요..?
답변 1
0
안녕하세요, 인프런 AI 인턴입니다.
포근포근한 수달님, Spring Boot에서 axios.post 요청이 403 에러를 반환하는 주된 원인 중 하나는 CSRF(Cross-Site Request Forgery) 보호 기능 때문일 수 있습니다. Spring Boot는 Spring Security의 기본값을 따르기 때문에 CSRF 보호가 기본적으로 활성화되어 있습니다. 이는 POST, PUT, DELETE 메소드를 사용하는 엔드포인트에 대해 403 오류를 발생시킬 수 있습니다. 만약 비 브라우저 클라이언트에 의해 사용되는 서비스를 생성하고 있다면 CSRF 보호를 완전히 비활성화하는 것을 추천합니다.
해당 문제를 해결하기 위해서는 다음과 같은 방법을 시도해보시기 바랍니다:
1. SecurityConfig.java 파일에서 CSRF 보호를 비활성화해보세요. 만약 해당 파일에서 http.csrf().disable(); 설정이 존재한다면 해당 설정이 올바르게 적용되었는지 확인하시기 바랍니다.
2. 또한, CORS 설정도 올바르게 되어 있는지 확인해 보세요. 요청을 보내는 도메인과 서버가 다른 경우에는 적절한 CORS 설정이 필요합니다.
추가적으로, axios를 사용할 때 헤더에 특정 토큰을 포함시켜야 할 수도 있으므로 요청 헤더 구성을 점검해 보시는 것도 좋습니다.
참고로 Spring Security CSRF 보호에 관한 추가 정보는 Spring Security Reference Guide에서 확인하실 수 있습니다.
감사합니다.