리액트로 프론트 짜고 있고, 백엔드는 다른 분이 만든 API를 붙이는 중이에요. 로컬에서 fetch로 호출했더니 콘솔에 이런 게 뜨네요.
Access to fetch at 'https://api.example.com/users' from origin 'http://localhost:3000'
has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present
on the requested resource.
구글 검색하니까 별별 해결법이 다 나오는데, 어떤 글은 프론트에서 mode 바꾸라 하고, 어떤 글은 프록시 쓰라 하고, 어떤 글은 서버에서 헤더 추가하라 하고, 정보가 너무 제각각이라 뭐가 맞는지 모르겠어요.
일단 제가 시도한 건요.
fetch(url, { mode: 'no-cors' }) // 에러는 사라졌는데 응답 body가 비어서 데이터를 못 씀
이거 하니까 에러 메시지는 안 뜨는데 정작 데이터를 못 받아와서 의미가 없더라고요.
제가 진짜 궁금한 건 이거예요. CORS 에러는 근본적으로 프론트가 잘못한 건가요 아니면 서버가 헤더를 안 줘서 그런 건가요? 백엔드 하시는 분한테 "서버에서 고쳐주세요"라고 말해야 하는 상황인지, 아니면 제 프론트 코드에서 풀 수 있는 문제인지 판단이 안 서요.
그리고 개발할 때 proxy 설정으로 우회하는 건 임시방편이라던데, 배포 나가면 어차피 다시 터지는 건지도 알려주시면 좋겠어요. 혼자 몇 시간째 헤매는 중입니다.