Question

나는 "/ 인증/페이스 북"

<a href='/auth/facebook'>Log In with Facebook</a> 

이 잘 작동에가는 내 웹 페이지에서 링크를 가지고있다.

반응 구성 요소에서 J에서 동일한 작업을 수행해야합니다. 이것은 코드입니다

<a className='btn btn-primary btn-outline' 
    role='button' 
    onClick={() => $.get('/auth/facebook')}> 

    Sign up/in to buy 

</a> 

Onclick이 실행되면 콘솔에서 교차 사이트 요청을 실행하려고하는 것처럼 오류가 출력됩니다.

XMLHttpRequest를로드 할 수 https://www.facebook.com/dialog/oauth?response_type=code&redirect_uri=http% ... Fauth % 2Ffacebook 2Fcallback % 범위 = & & public_profile CLIENT_ID = XXXX. 요청한 리소스에 'Access-Control-Allow-Origin'헤더가 없습니다. 따라서 원점 'http://localhost'은 액세스 할 수 없습니다.

제 생각에 링크와 $ .get 호출은 모두 내 서버 "localhost"로 이동하여 동일한 경로를 트리거해야합니다. 두 통화의 차이점은 무엇입니까?

Answer 1

$.GET은 서버에서 데이터를로드하려고합니다 (제대로 작동한다고 가정하고 CORS 오류가 발생하지 않음). 리디렉션을 처리하지 않습니다. 당신이 반응 사용하고있는 것 같습니다 때문에 당신은 또한 react- 같은 라우터 모듈을 사용하여 혜택을 누릴 수,

onClick={() => window.location.href = '/auth/facebook'}

: 어떤 이유로 당신이 href 속성을 사용할 수없는 경우, 당신은 뭔가를 할 수 있습니다 라우터 (https://github.com/ReactTraining/react-router)는 <Link> 구성 요소를 노출하여 UI를 URL과 동기화 된 상태로 유지합니다.