inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)

회원 가입 페이지 기능 생성(2)

cors 에러

591

최지웅

작성한 질문수 1

0

안녕하세요. 회원가입 페이지 기능 생성중인데 서버 쪽에서 const origin = "http://localhost:3000";

app.use(cors({

origin

})); 이렇게 클라이언트 포트인 3000포트를 허용해줬습니다. 그런데 회원가입페이지에서 버튼을 누르면 XMLHttpRequest cannot load http://localhost:4000/api/auth/register due to access control checks. 요런식으로 에러남 요런 에러가 나는데 cors가 제대로 안먹히는고 있는건가요?

react node.js postgresql docker typescript 클론코딩 next.js

답변 1

0

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴이에요.

cors 에러는 Cross-Origin Resource Sharing (CORS) 정책을 위반하는 경우 발생하는 오류입니다. 보내려는 요청의 출처와 서버의 응답 출처가 다른 경우 발생할 수 있습니다.

클라이언트에서 포트 3000으로 요청을 보내고 서버에서 포트 4000으로 응답을 보내야 할 때, 기본적으로 브라우저는 보안 상의 이유로 이를 차단합니다.

cors 에러를 해결하기 위해 아래 몇 가지 방법을 시도해 볼 수 있습니다.

  1. 서버에서 cors 설정을 추가합니다.
    서버에서 클라이언트에서 온 요청을 허용해야 합니다. express에서 cors 라이브러리를 사용하고 있다면, 옵션에 { origin: 'http://localhost:3000' }를 추가해줘야 합니다.
    또는 모든 origin을 허용하기 위해 { origin: '*' }으로 설정할 수 있습니다.

  2. 프론트엔드에서 프록시 서버를 사용합니다.
    프론트엔드에서 요청을 프록시 서버에 보내고, 프록시 서버에서 다시 실제 서버로 요청을 보내는 방법을 사용할 수 있습니다. 이를 통해 동일 출처 정책을 우회할 수 있습니다.
    프록시 서버에 대한 자세한 내용은 인프런 Community에서는 답변해드릴 수 없으니, 구글링해서 프록시 서버를 구축해 보세요.

이외에도 브라우저 확장 프로그램을 사용하여 cors 에러를 해결할 수도 있습니다.

더 자세한 내용은 MDN 웹 문서(https://developer.mozilla.org/ko/docs/Web/HTTP/CORS)를 참고해주세요.

건승하세요!

toJson을 추가하면 [sub].tsx에서 sub를 받아오지 못합니다.

0

119

2

쿠키 저장이 되지 않습니다.

0

224

1

AxiosError {message: 'Request failed with status code 401/500', name: 'AxiosError', code: 'ERR_BAD_RESPONSE', (2)

0

580

1

AxiosError {message: 'Request failed with status code 401/500', name: 'AxiosError', code: 'ERR_BAD_RESPONSE',

0

649

1

overload 에러

0

170

1

docker compose up 오류

0

207

1

부록) remark 강의 중 parmas 오류

0

139

1

3000번은 잘 들어가지는데 80번은 안됩니다.

1

295

0

커뮤니티를 올리고 난 후 404 page

0

209

1

tailwind css 문제인지, className 에 적용한 css가 적용되지 않아요.

0

1042

2

tsx 수정 시 마다 빌드 후 서버 시작 해야하나요?

0

652

2

useState 쳤을 때 자동완성 되는 단축키 무엇인가요? extention 인가요?

0

805

2

리액트 서버 npm run dev 와 npm run build 후 npm start 의 차이

0

4602

2

data 폴더가 생성되지 않아요.

0

525

1

docker-compose up 오류

0

814

1

회원 가입 페이지 기능 생성(3) 중 에러

0

380

2

Entity에 toJSON 코드 입력 후 404 에러

0

252

1

context에서 useEffect 선언 부분 질문 있어요.

0

295

1

src 폴더구조

0

511

2

서버 실행 시 에러 관련하여 답변받고 1차 조치했는데 여전하여서 질문 남깁니다

0

298

1

엔티티 모두 작성 후 서버 실행 시 에러가 발생합니다

0

313

1

회원가입 누르면 404에러가 뜹니다 ;-;

1

424

1

nextjs버젼에 대해서 질문드립니다.

0

373

1

<npm run dev>시 -61 에러가 나타납니다!

0

357

1