게시판 업로드 관련 CORS오류 질문

Question

안녕하세요 이제 막 개발을 시작해서 지식이 부족한채로 프로젝트를 시작해서 문제가 생겨서 아무리 머리를 싸매고 인터넷을 찾아봐도 해결책이 나오지 않아 혹시 좋은 해결방안이 있을까 해서 질문글을 작성합니다.설명이 조금 미흡한 부분이 있을 수 있으니 미리 죄송하다는 말씀 드리면서 질문하겠습니다.로그인을 한 상태에서 제목과 내용, 파일을 첨부해서 write.do에 요청을 보내면 로그인 시 할당된 토큰과 현재 요청 보내는쪽의 토큰을 대조하여 맞으면 저장하는 방식으로 기획했지만, CORS오류가 나서 여쭤보겠습니다.우선 프론트엔드 코드입니다. const token = sessionStorage.getItem("token"); const [title, setTitle] = useState(""); const [subject, setSubject] = useState(""); const [file, setFile] = useState(null); const [id, setId] = useState(""); const [num, setNum] = useState(token); const [date, setDate] = useState(""); const board = new FormData(); board.append("num", num); board.append("id", id); board.append("title", title); board.append("subject", subject); board.append("file", file); board.append("date", date); const saveBoard = () => { axios .post("http://localhost:3001/write.do", board, { headers: { "Content-Type": "multipart/form-data", Authorization: `Bearer ${token}`, withCredentials: true, }, }) .then((res) => { console.log("저장 성공 : ", res.data); }) .catch((error) => { console.error("저장실패: ", error); console.log(JSON.stringify(board)); console.log(board); alert(board); // console.log(); // console.log(JSON.stringify(token)); // console.log(token); // console.log(board); alert(board); if (error.response) { // 서버 응답 왔을때 alert("서버 오류 : " + error.response.status); } else if (error.request) { //요청은 가는데 응답이 안올때 alert("서버 응답 오류"); alert(error); } else { // 요청 전송전에 에러발생 alert("요청 전송 중 오류 발생"); } }); };이 상태에서 요청을 보내면 브라우저 개발자 도구에 토큰값은 잘 출력이 되지만, 폼데이터를 출력해보면 공란으로 출력되는 문제 또한 있습니다.

제목: {setTitle(e.target.value)}} /> 내용 {setSubject(e.target.value)}} /> File: {setFile(e.target.files[0])}} />

return 값입니다. 이쪽에서 입력을 하여 버튼을 눌러 write.do로 전송을 합니다. @PostMapping(value="/write.do", produces="application/json; charset=utf-8") public @ResponseBody CommunityDTO post(JwtToken mjwt, CommunityDTO cDTO, MultipartFile mf, HttpServletResponse res) { System.out.println(mf.getOriginalFilename()); res.addHeader("Access-Control-Allow-Origin", "http://localhost:3000"); res.addHeader("Access-Control-Allow-Credentials", "true"); return cDAO.post(mjwt, cDTO, mf); }스프링부트 백엔드의 write.do 입니다.Access to XMLHttpRequest at 'http://localhost:3001/write.do' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. newBoard.js:59 저장실패: AxiosError {message: 'Network Error', name: 'AxiosError', code: 'ERR_NETWORK', config: {…}, request: XMLHttpRequest, …} newBoard.js:60 {} newBoard.js:61 FormData {} newBoard.js:47 POST http://localhost:3001/write.do net::ERR_FAILED saveBoard @ newBoard.js:47 프레임 21개 더 표시브라우저 개발자 도구 에러 내역입니다.설명이 미흡해서 죄송하지만 너무 답답한 나머지 얕은 지식으로 질문 드렸습니다.귀한 시간 내주셔서 감사합니다.

하루의_spring · Answer

cors 에러가 왜 발생하는지 먼저 알아보시면 바로 해답 나옵니다 그리고 cors 헤더는 controller 이 아니라 서버 부팅할때 설정을 해야 하니 bean 으로 만들어야 합니다 구글에 corsConfig 라고 검색하면 어떻게 설정하는지 나옵니다

최은영 · Answer

@PostMapping(value="/write.do", produces="application/json; charset=utf-8") public @ResponseBody CommunityDTO post(JwtToken mjwt, CommunityDTO cDTO, MultipartFile mf, HttpServletResponse res) { System.out.println(mf.getOriginalFilename()); res.addHeader("Access-Control-Allow-Origin", "http://localhost:3000"); res.addHeader("Access-Control-Allow-Credentials", "true"); return cDAO.post(mjwt, cDTO, mf); } Access to XMLHttpRequest at 'http://localhost:3001/write.do' 보이시나요? 포트번호 다른거..

사는게꽃같네 · Answer

크롬에서 작업중인가여?

게시판 업로드 관련 CORS오류 질문

3개의 답변

Q&A 목록