inflearn logo
강의

講義

知識共有

[リニューアル] ReactでNodeBird SNS作成

CORSのトラブルシューティング

cors관련 문의

361

broccoliindb

投稿した質問数 10

0

안녕하세요.  cors관련해서 궁금한게 있어서 문의드려요~

해당 문제에대해 나름 검색을 해봐서 답을 구해봤는데, 제가 이해한 부분이 맞는지 알고 싶어서요~ 먼저 항상 친절한 답변 감사드려요~

문의1) cors는 자체는 요청한 도메인이 요청받은 도메인과 서로 다른경우 일어나는 에러인데, 요청받은 서버쪽에서 요청한쪽에 클라이언트의 도메인(포트포함)을 허용해줘야 해결이 되야한다고 알고 있습니다. 그리고 이런 cors정책이 있는 부분은 브라우저이기 때문에 브라우저 외적으로 요청이 가거나 브라우저를 속이는 방식으로는 cors에 걸릴일이 없습니다.

cors를 해결하기 위해서는 프론트쪽에서는 설정할게 없고 요청받은 서버에서 요청이 오는 클라이언트 스킴,도메인,포트를 등록해줘야합니다.

제가 이해한 부분이 맞나요?

문의2)

app.get('/auth/github',
  passport.authenticate('github', { scope: [ 'user:email' ] }));

이로직을 통해 로그인버튼은 /auth/github으로 요청을 날리는 상황가정

2-1) 프론트랑 백엔드가 서버가 동일한경우(localhost:3000)

브라우저:3000 -> 백앤드:3000 -> github

프론트는 3000포트이고 /auth/github 라우터가 있는 백엔드서버도 3000포트이기때문에  github에 요청시 cors문제가 없습니다.

2-2) 프론트(localhost:3000)랑 백엔드(localhost:3065) 서버가 동일하지 않은경우

브라우저:3000 -> 백앤드:3065 -> github

프론트는 3000포트이고 /auth/github 라우터가 있는 백엔드는 3065입니다. 

이경우엔 저렇게 하면 cors가 납니다. 

strict-origin-when-cross-origin이라는 정책에 막힌건데

아무리 설명을 읽고 번역해도 솔직히 잘 이해는 가지 않더라구요. 

브라우저(3000)가 백엔드(3065)에 요청을 날리고 백엔드가 깃헙(github)에 패스포트를 통해 요청을 날리는 경우 디폴트 브라우저 정책으로는 허용되지 않는거같은데,

프론트서버 백엔드서버가 나뉘는 경우는 

app.get('/auth/github',
  passport.authenticate('github', { scope: [ 'user:email' ] }));

이렇게 백엔드가 대신 요청하는 방식은 허용이 안되는거죠?

2-3) 해결책: 버튼에 <a href=''> 달아서 직접 깃헙 oauth 요청링크를 달아서하는 방식으로 해결했는데 이렇게 하는 방법이 일반적인건가요?

cors관련문의 redux react nodejs express Next.js

回答 2

1

zerocho

1. 이해하신 게 맞습니다.

2. 프론트랑 백엔드가 다른 경우 sns 로그인이 상당히 어렵습니다. 할 수는 있으나, 백엔드 기준으로 요청을 보낸 후, 응답받은 내용(세션 쿠키 등)을 백엔드에서 프론트로 다시 한 번 쏴주는 추가 작업이 필요합니다. a 태그로 직접 깃헙 oauth로 하시면 편하긴 하실텐데, 이 경우는 반대로 백엔드에도 로그인되었다는 것을 알리셔야 합니다.

0

broccoliindb

네 친절한 답변 감사드려요. ^^

넥스트 버젼 질문

0

78

2

로그인시 401 Unauthorized 오류가 뜹니다

0

89

1

무한 스크롤 중 스크롤 튐 현상

0

175

1

특정 페이지 접근을 막고 싶을 때

0

103

2

createGlobalStyle의 위치와 영향범위

0

96

2

인라인 스타일 리렌더링 관련

0

91

2

vsc 에서 npm init 설치시 오류

0

146

2

nextjs 15버전 사용 가능할까요?

0

158

1

화면 새로고침 문의

0

121

1

RTK에서 draft, state 차이가 있나요?

0

153

2

Next 14 사용해도 될까요?

0

452

1

next, node 버전 / 폴더 구조 질문 드립니다.

0

349

1

url 오류 질문있습니다

0

211

1

ssh xxxxx로 우분투에 들어가려니까 port 22: Connection timed out

0

373

1

sudo certbot --nginx 에러

0

1275

2

Minified React error 콘솔에러 (hydrate)

0

470

1

카카오 공유했을 때 이전에 작성했던 글이 나오는 버그

0

247

1

프론트서버 배포 후 EADDRINUSE에러 발생

0

327

1

npm run build 에러

0

518

1

front 서버 npm run build 중에 발생한 에러들

0

382

1

서버 실행하고 브라우저로 들어갔을때 404에러

0

338

2

css 서버사이드 랜더링이 적용되지 않아서 문의 드립니다.

0

288

1

팔로워 3명씩 불러오고 데이터 합쳐주는걸로 바꾸고 서버요청을 무한으로하고있습니다.

0

239

2

해시태그 검색에서 throttle에 관해 질문있습니다.

0

201

1