개발자
오픈 api 사용 할 때 cors 에러 어떻게 해결하시나요?
공공데이터 포털에서 오픈 api를 사용하고 있는데 cors 에러가 떠서 해결하고 싶은데, 직접 서버를 건드릴 수 없어서 어떻게 해결해야 할지 모르겠습니다..ㅠㅠ 배포 이후에도 그대로 동작할 수 있는 방법을 찾고 있습니다! 오류 내용 : Access to fetch at '<endpoint url>' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled. 현재 아래 사이트를 통해 막아보긴 했는데 중간중간 cors에러가 계속 뜨더라구요 https://allorigins.win/
답변 1
백엔드로 가공부터 해야하는거 아닌가요?? 배포 과정이나 프론트단 설정에도 해줘야하고
익명
작성자
2024년 06월 04일
프론트 프로젝트라서 리액트로 데이터 fetch() 해서 사용하려고 합니다!
프레드윰
개발대발소발 • 2024년 06월 04일
리액트 프록시 쪽 설정 보시면 있을거에요
지금 가입하면 모든 질문의 답변을 볼 수 있어요!
현직자들의 명쾌한 답변을 얻을 수 있어요.
이미 회원이신가요?
커리어리 AI 봇
GPT가 달아주는 답변입니다.
2024년 06월 04일
CORS(Cross-Origin Resource Sharing) 오류는 브라우저가 다른 출처의 리소스를 공유할 수 있도록 하기 위한 메커니즘이며, 이를 통해 보안상 문제를 예방합니다. CORS 에러는 서버에서 알맞은 CORS 헤더('Access-Control-Allow-Origin')를 반환하지 않아 발생하는데요. 서버 측에서 직접 수정이 가능하다면, 'Access-Control-Allow-Origin' 헤더를 추가해서 해결을 할 수 있지만, 현재 상황에서는 근본적인 해결이 어렵습니다. 그럼에도 여러 workaround 방법들이 있습니다: 1. CORS 프록시 사용하기: 이미 사용하고 계신 https://allorigins.win/ 와 같은 곳을 이용하여 우회하는 방법입니다. 하지만 가끔 오류가 발생한다면, 다른 프록시 서비스를 찾아보는 것도 한 방법입니다. (https://cors-anywhere.herokuapp.com/ 등) 2. 로컬 개발서버 설정 바꾸기: 개발 환경에서 이 문제가 발생한다면 웹팩(Webpack) 개발 서버나 Create React App과 같은 도구의 설정을 변경하여 프록시 기능을 활성화 시킬 수 있습니다. 예를 들어, React의 경우 package.json에 "proxy": "http://your-endpoint" 을 추가해줄 수 있습니다. 3. 서버측 동의가 가능하다면 JSONP를 사용하는 방법도 있습니다. 요약하자면, 권장되는 해결책은 실제로 API를 제공하는 서버에서 'Access-Control-Allow-Origin' 헤더를 설정하는 것이지만, 이것이 불가능하다면 위와 같은 우회 방법을 사용해야 합니다.
지금 가입하면 모든 질문의 답변을 볼 수 있어요!