sagas->passport-> SNS login

FRONT END: NEXT (localhost:3000)
BACK END: EXPRESS (localhost:3065)

프론트와 백엔드가 나뉘어있고 로그인 버튼을 통해서 백엔드 api에 접근해서 github으로 로그인하기

//핸들러
const githubLogin3 = useCallback(() => {
  window.open('http://localhost:3065/auth/github', '_self')
}, [])
const onGithubLogin = useCallback(() => {
  dispatch({ type: TYPES.LOGIN_REQUEST, data: 'github' })
}, [])
const githubLogin = useDebounce(onGithubLogin, 300)

//로그인 버튼
<a href="https://github.com/login/oauth/authorize?client_id=...&scope=user:email">
  <button>깃헙 케이스1</button>
</a>
<a href="http://localhost:3065/auth/github">
  <button>깃헙 케이스2</button>
</a>
<button onClick={githubLogin3}>깃헙 케이스3</button>
<button onClick={githubLogin}>깃헙 케이스4</button>

첨엔 케이스4번으로 saga로 로그인 요청 액션을 보내서 axios를 사용해서 진행해보려고 했다. 엄청난 시도를 해봤다. 내가 패스포트 로직을 뭔가 잘못한걸까 싶어서 참조소스를 엄청나게 구글링했나. 하지만 모두 실패(CORS)했고 구글링 어디에도 axios같은 ajax를 통해서 SNS로그인을 시도하는 경우는 찾지 못했다.

케이스1, 2, 3 번 모두 잘 됐다.

1번은 버튼의 anchor태그로 브라우저에서 바로 깃헙의 요청하는 것이다. 문제없이 사용자 정보를 가지고 왔다.
2번, 3번은 백엔드 라우팅(/auth/github)을 해서 거기서 깃헙에 요청을 하는 방식이다.
단지 2번은 anchor태그를 사용하고 3번은 window.open함수를 이용해서 백엔드에 요청을 한 방식이다.

그렇다면 왜 ajax를 통한 SNS는 브라우저에서 막히는 것일까? 사실 이건 잘 모르겠다. 웹이 보안이 취약해서 생긴 정책이란건 알지만 어떤 이유로 인해 안되는 건지는 아직 찾지 못했다.

삽질하느라 고생했다.......................