인프런 커뮤니티 질문&답변
작성한 질문수
두번째 게시글 등록이 안되네요.
해결된 질문
작성
·
63
·
수정됨
0
안녕하세요. 수업 내용의 모든 내용에 대응했는데도,
두번째 게시글 등록이 안되네요.
브라우저에 보이는 에러 로그 남겨놓겠습니다.
조언 부탁드립니다.
답변 4
0
0
0
안녕하세요! 일단 404오류인걸 보니
axios로 요청한 url이 spring boot 서버에 존재하지 않는것 같습니다.
get 요청인지 post 요청인지 메소드 확인
cors 설정을 하였는지
spring boot에 /api/posts 가 맞는지
서버가 켜져있는지
확인 부탁드립니다!
위 4개의 문제가 아니라면 서버 로그 복붙해서 올려주시면 감사하겠습니다.
해당 이미지는 .env 파일이 dotenv로 할당되었다는 것 같습니다.
오류랑은 무관한거 같아서 1,3번 확인 후, 그래도 안되시면 react에서 spring boot에 axios 요청을 한 후, 서버 로그를 복붙해서 올려주시면 감사하겠습니다!
인텔리제이엔 에러 로그가 안 나오고,
브라우져에 에러 로그가 나오고 있습니다.
게시글 등록 실패:
Object { message: "Request failed with status code 404", name: "AxiosError", code: "ERR_BAD_REQUEST", config: {…}, request: XMLHttpRequest, response: {…}, status: 404, stack: "", … }
code: "ERR_BAD_REQUEST"
config: Object { timeout: 0, xsrfCookieName: "XSRF-TOKEN", xsrfHeaderName: "X-XSRF-TOKEN", … }
adapter: Array(3) [ "xhr", "http", "fetch" ]
allowAbsoluteUrls: true
data: '{"title":"제목2","content":"내용2"}'
env: Object { FormData: FormData(), Blob: Blob() }
headers: Object { Accept: "application/json, text/plain, /", "Content-Type": "application/json" }
maxBodyLength: -1
maxContentLength: -1
method: "post"
timeout: 0
transformRequest: Array [ transformRequest(data, headers)
]
transformResponse: Array [ transformResponse(data)
]
transitional: Object { silentJSONParsing: true, forcedJSONParsing: true, clarifyTimeoutError: false }
url: "http://localhost:8080/api/posts"
validateStatus: function validateStatus(status)
xsrfCookieName: "XSRF-TOKEN"
xsrfHeaderName: "X-XSRF-TOKEN"
<prototype>: Object { … }
message: "Request failed with status code 404"
name: "AxiosError"
request: XMLHttpRequest { readyState: 4, timeout: 0, withCredentials: false, … }
response: Object { data: {…}, status: 404, statusText: "", … }
status: 404
<prototype>: Object { constructor: AxiosError(message, code, config, request, response), toJSON: toJSON()
, stack: "", … }
CreatePost.js:25:1
onClickSubmit CreatePost.js:25
(비동기: promise callback)
onClickSubmit CreatePost.js:23
React 8
executeDispatch
runWithFiberInDEV
processDispatchQueue
dispatchEventForPluginEventSystem
batchedUpdates$1
dispatchEventForPluginEventSystem
dispatchEvent
dispatchDiscreteEvent
해당 컨트롤러 부분에서 @RequestMapping ("api/post")를 @RequestMapping("api/posts")로 변경해보시겠어요?
변경 후, 안된다면 말씀해 주세요!
get 요청인지 post 요청인지 메소드 확인 -> 어느 부분을 확인하면 될까요? 혹시나 싶어서 깃북의 소스로 복사 붙임 하였습니다.
3. spring boot에 /api/posts 가 맞는지 -> PostController.java 소스 코드 상단에
@RequestMapping("/api/posts") 어노테이션이 설정되어 있는지 말씀하시는 건지요?
해결되었습니다. @RequestMapping ("api/posts") 이 바른 어노테이션 표기인데, @RequestMapping ("api/post") 라고 표기해 버렸네요... 감사합니다!
0
안녕하세요, 인프런 AI 인턴입니다. Jang Jaehoon님.
게시글 등록 시 발생하는 문제에 대해 안내해드리겠습니다. 브라우저 개발자 도구에서 확인한 404 오류는 주로 요청한 API 주소가 잘못되어 있거나 서버에서 해당 경로에 대한 처리가 이루어지지 않을 때 발생합니다. 다음과 같은 항목들을 확인해보시기 바랍니다:
API 경로 확인: React 애플리케이션에서 요청하고 있는 API 경로가 서버 측에서 정확하게 매핑되어 있는지 확인하세요. 예를 들어,
http://localhost:8080/api/posts가 서버에 정의된 경로와 일치해야 합니다.CORS 설정: 서버가 외부 요청을 차단하고 있을 수 있습니다. Spring Boot에서 CORS 설정이 필요하다면, 컨트롤러 클래스 혹은 전역적으로 CORS 정책을 설정해야 합니다.
백엔드 서버 확인: 백엔드 서버가 올바르게 실행 중인지 확인하세요. 서버 콘솔에서 오류 메시지가 없는지 확인하고 해당 경로에 대한 매핑이 올바르게 이루어졌는지 확인합니다.
Axios 요청 확인: 클라이언트에서 Axios를 통해 요청을 보내는 부분이 정확하게 설정되어 있는지 확인해보세요. 특히, 요청 헤더나 데이터 형식이 일치하지 않으면 오류가 발생할 수 있습니다.
또한, 아래의 유사한 질문이 도움될 수 있습니다:
위의 해결책이 도움이 되지 않거나 추가적인 문제가 있는 경우, 구체적인 오류 메시지나 에러 로그를 남겨주시면 더 정확한 안내가 가능합니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
cors 설정은 하였고, 4. 서버도 여러번 재기동 해보았습니다. 그리고 오늘 다시 인텔리제이 기동시켜 보니, 아래와 같은 메시지가 나옵니다. 다음 쪽도 확인해 보겠습니다.
2. cors설정입니다.