강의

멘토링

로드맵

Inflearn brand logo image

인프런 커뮤니티 질문&답변

이승엽님의 프로필 이미지
이승엽

작성한 질문수

[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스

이미지 수정시 CORS 에러 발생에 관하여

해결된 질문

작성

·

42

0

안녕하세요, 현재 이미지 업로드 및 수정 과제를 진행중에 발생한 CORS 에러에 대해 질문드립니다.

 

  1. 새로운 게시글의 이미지 input 데이터를 graphQL에 전송하는 것은 문제가 없습니다.

  2. 수정하는 게시글에서 이미지를 onChange를 통해 updateFile에 업데이트하는 것도 문제가 없습니다.

  3. 최종적으로 수정을 완료하는 graphQL에 통신을 하는 과정에서 다음과 같은 에러가 발생합니다.

스크린샷 2025-05-14 오후 1.06.22.png.webp

며칠전에 같은 작업을 했을 때에는 문제가 없었던 부분이라 질문드립니다.

답변 2

0

이승엽님의 프로필 이미지
이승엽
질문자

어제까지만 해도 됐는데 안되었던걸 보니 제가 문제가 있을 것 같아 다시 열심히 키보드를 두드리다가 갑자기 또 됩니다.

왜인지는 모르겠습니다....

되다가... 안되다가... 흠....

일단 되니까 좋았으...

코드캠프님의 프로필 이미지
코드캠프
지식공유자

된다고 하니 다행이에요 🙂
오늘도 화이팅하세요!

0

안녕하세요, 인프런 AI 인턴입니다. 이승엽님.

이미지 업로드나 수정을 진행하면서 발생하는 CORS(Cross-Origin Resource Sharing) 에러는 주로 서버 측에서 설정해야 하는 문제입니다. 아래에 CORS 문제 해결을 위한 몇 가지 설명과 조언을 드리겠습니다.

  1. CORS 정책 이해: CORS는 서버와 클라이언트 도메인이 다를 때 클라이언트가 서버의 리소스를 사용할 수 있게 해줍니다. 서버는 클라이언트의 도메인을 설정하여 특정 도메인에 대해 허용할 수 있습니다.

  2. 서버 설정 확인: CORS 에러가 발생하는 경우, 가장 먼저 서버의 설정을 확인해야 합니다. 서버에서 Access-Control-Allow-Origin 헤더를 제대로 설정했는지 확인해 보세요. 특히, 개발 환경에서는 *로 모든 도메인을 허용하거나, http://localhost:3000을 명시적으로 설정하세요.

  3. 원본 서버 상태: 몇일 전에는 문제가 없었다고 하신 점을 보아 서버 상태가 변한 것일 수 있습니다. 서버에서 CORS 정책이 변경되었거나, 서버 업데이트로 인해 응답 헤더 설정이 바뀌지 않았는지 확인이 필요합니다.

아래 링크에서 동일한 CORS 이슈와, 해결 방법에 관한 토론을 찾아볼 수 있습니다:
- CORS 에러와 해결 방법에 관한 인프런 커뮤니티 게시글

위 링크에서는 오프라인 부트캠프 수강생과 인프런 강의 수강생의 서버 주소 차이에 대해 설명하고 있습니다. 작업하고 있는 서버 주소가 올바른지 다시 확인해 보시는 것도 도움이 될 수 있습니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

이승엽님의 프로필 이미지
이승엽

작성한 질문수

질문하기