인프런 커뮤니티 질문&답변

안녕하세요.  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 요청링크를 달아서하는 방식으로 해결했는데 이렇게 하는 방법이 일반적인건가요?