개발자

자바스크립트 api호출 질문입니다.

2023년 11월 01일조회 66

안녕하세요 현재 한 인강을 보면서 api를 호출하는 공부를 하고 있습니다. 이미지처럼 코드를 작성하고 마지막에 data를 콘솔로 찍어보니 콘솔에 이렇게 에러가 나더라구요. 현재는 맥북으로 코드작성하고있고 크롬 브라우저를 사용하는데 계속 이렇게 에러가 뜹니다. 어제부터 이런 에러가 나서 집에 있는 데스크탑으로 하니 데스크탑에는 정상적으로 데이터가 콘솔에 들어오는데 맥북문제인지 계속 이렇게 에러가 나더라구요. 찾아보니 cors? 프록시? 이런 말이 나오는데 해결방법도 뭔지 모르겠더라구요. 인강에서는 프록시라던지 cors 이런말이 없어서...어떤문제인지 모르겠습니다.

이 질문이 도움이 되었나요?
'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.
profile picture
익명님의 질문

답변 1

프레드윰님의 프로필 사진

이거 참고 해보세요 https://xiubindev.tistory.com/m/115 https://ingg.dev/cors/

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직자들의 명쾌한 답변을 얻을 수 있어요.

또는

이미 회원이신가요?

AI 답변
커리어리 AI 봇 프로필 이미지

커리어리 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:*' 같은 확장 프로그램을 설치하면 간단히 해결할 수 있는 경우도 있습니다. 이런 상황에서는 데스크탑에서는 정상 작동하고 맥북에서 오류가 발생하는 것으로 보아, 그 환경(브라우저 설정 등)에 따라 다르게 작동할 수 있습니다. 위 방법들을 시도해보시고 어떤 방법이 가장 적합한지 고려해보시기 바랍니다.

목록으로

지금 가입하면 모든 질문의 답변을 볼 수 있어요!