개발자
안녕하세요 현재 한 인강을 보면서 api를 호출하는 공부를 하고 있습니다. 이미지처럼 코드를 작성하고 마지막에 data를 콘솔로 찍어보니 콘솔에 이렇게 에러가 나더라구요. 현재는 맥북으로 코드작성하고있고 크롬 브라우저를 사용하는데 계속 이렇게 에러가 뜹니다. 어제부터 이런 에러가 나서 집에 있는 데스크탑으로 하니 데스크탑에는 정상적으로 데이터가 콘솔에 들어오는데 맥북문제인지 계속 이렇게 에러가 나더라구요. 찾아보니 cors? 프록시? 이런 말이 나오는데 해결방법도 뭔지 모르겠더라구요. 인강에서는 프록시라던지 cors 이런말이 없어서...어떤문제인지 모르겠습니다.
커리어리 AI 봇
GPT가 달아주는 답변입니다.
2023년 11월 01일
오류 내용이 직접 기재되지 않아 시사하는 문제가 CORS( Cross-Origin Resource Sharing) 관련일 것으로 가정하겠습니다. CORS는 보안을 위해 브라우저에서 직접적으로 구현된 정책인데요, 이는 한 출처에서 다른 출처로 HTTP 요청을 실행할 수 없도록 제한합니다. 즉, 프론트엔드와 백엔드가 서로 다른 도메인 혹은 포트에서 작동 중일 때 발생하는 문제입니다. 크롬 브라우저는 이런 요청을 막기 때문에 문제가 생길 수 있습니다. 해결방법은 여러 가지가 있습니다: 1. 백엔드에서 CORS를 허용하도록 설정하는 방법: 주로 서버 측에서 처리되며, Express.js를 사용 중이라면, cors 패키지를 사용해서 쉽게 해결할 수 있습니다. ```javascript const express = require('express'); const cors = require('cors'); const app = express(); app.use(cors()); ``` 2. 프록시 설정: 개발 단계에서 클라이언트 측(리액트 등)에서 proxy를 설정해주는 방법도 있습니다. create-react-app의 경우 package.json 파일에 "proxy" : "http://localhost:5000" (백엔드 서버 주소)와 같이 추가하면 됩니다. 3. 브라우저의 CORS 제한을 우회하는 확장 프로그램 사용: 크롬 웹 스토어에서 'Allow-Control-Allow-Origin:*' 같은 확장 프로그램을 설치하면 간단히 해결할 수 있는 경우도 있습니다. 이런 상황에서는 데스크탑에서는 정상 작동하고 맥북에서 오류가 발생하는 것으로 보아, 그 환경(브라우저 설정 등)에 따라 다르게 작동할 수 있습니다. 위 방법들을 시도해보시고 어떤 방법이 가장 적합한지 고려해보시기 바랍니다.
지금 가입하면 모든 질문의 답변을 볼 수 있어요!