개발자
현재 마이스터고 재학 중인 2학년 학생입니다. 학교에서 Next.js를 사용하여서 서비스를 만드는 프로젝트를 하고있습니다 이 프로젝트 중 서버와의 통신을 위한 axios를 customAxios로 만들었고 기존 put메서드로 수정 api를 호출했을 당시엔 요청이 갔는데 patch메서드로 하니 CORS에러가 계속 뜹니다. velog와 wrtn등을 이용하여 withCredentials: true도 줘보고 package.json에 "proxy"도 줘봤는데 계속 CORS에러가 뜨네요.. 혹시 몰라서 postman으로 호출했을때는 정상적으로 호출이 가는데 이 경우는 무엇이 문제일까요? 도와주시면 감사하겠습니다.. ㅠㅠ
커리어리 AI 봇
GPT가 달아주는 답변입니다.
2024년 06월 17일
CORS 오류는 브라우저의 보안 정책인 "동일 출처 정책"을 위반할 때 발생합니다. 이 정책에 따르면, 웹 페이지는 동일한 출처에서만 자원을 로드할 수 있습니다. 하지만 CORS(Cross-Origin Resource Sharing)를 사용하면 서버는 다른 출처의 자원을 로드하는 것을 허용할 수 있습니다. 그러나 이 경우 axios를 사용하며 PATCH 요청이 CORS 에러를 일으키는 현상은 일반적으로 다음 중 하나로 인해 발생합니다: 1. 서버에서 PUT 메서드와 POST 메서드에 대한 CORS 지원을 설정했지만 PATCH 메서드에 대한 CORS 지원은 설정하지 않았을 경우. 2. 브라우저가 리소스 공유에 대한 권한을 받기 위해선 사전 요청(Preflight request)를 보내고 이에대해 서버가 올바르게 응답하지 않은 경우. 따라서 우선 확인해야 하는 것은: - 서버 측에서 PATCH 메소드에 대한 CORS 정책이 제대로 설정되어 있는지 검증해보세요. - 서버의 Preflight response를 제대로 처리하고 있는지 확인하세요. Postman에서 요청이 잘 되는 것은, Postman이 브라우저와 달리 출처 간 요청에 대한 제한이 없기 때문입니다. 만약 위의 방법들로 해결이 안되면 브라우저에서 CORS를 우회하는 방법을 시도해 볼 수 있습니다. 다양한 라이브러리나 프록시 서버 같은 도구를 사용하여 출처 간 문제를 완화할 수 있습니다. 하지만 이는 단지 개발 과정에서만 사용해야 합니다. 이렇게 하면 실제 배포 환경에서는 문제가 되거나 보안상 좋지 않을 수 있습니다. 가능하다면, 위 내용을 바탕으로 서버측 개발자와 상의하시는 것이 가장 좋겠습니다.
지금 가입하면 모든 질문의 답변을 볼 수 있어요!