CORS에 의해 차단된 https://accounts.google .com/o/oauth2/v2/auth에 대한 액세스 권한을 가져옵니다.

Question

Google 인증을 위해 React에서 Express로 가져오기를 보내고 있는데 CORS 오류로 인해 액세스가 차단되었습니다. 인증을 위해 React의 POST 요청을 Google URL로 리디렉션하고 있습니다. Express 애플리케이션에서 cors를 사용해 보았지만 여전히 같은 오류가 발생했습니다.

를 얻기 위해 으아악

Express app.js에서 cors 사용

으아악

Google 인증으로 리디렉션해 보세요

으아악

오류: 추출을 위해 "https://accounts.google .com/o/oauth2/v2/auth?access_type=offline&scope=https%3A%2F%2Fmail.google.com%2F&response_type=code&client_id=727520060136"에 액세스 중 - ngpfd4ll798v42gfclh7cms9ndqstt32. apps.googleusercontent.com&redirect_uri=http%3A%2F%2Flocalhost%3A8000'('http://localhost:8000/api/mail/login'에서 리디렉션됨)이 원본 'http://localhost:3000'에서 CORS 정책으로 변경되었습니다. 차단: 요청한 리소스에 'Access-Control-Allow-Origin' 헤더가 존재하지 않습니다. 불투명한 응답이 요구 사항을 충족하는 경우 요청 모드를 "no-cors"로 설정하여 CORS가 비활성화된 리소스를 가져옵니다.

Answer 1

인증 흐름은 요청을 사용하지 않고 눈에 보이는 브라우징 컨텍스트fetch 내에서 발생해야 합니다. 즉, 현재 탭을 http://localhost:8000/api/mail/login으로 탐색 해야 합니다(또는 새 탭을 열어야 합니다). 그러면 https://accounts.google로 리디렉션됩니다. com/o/oauth2/v2/auth?... 페이지가 표시됩니다. 이제 사용자는 페이지와 상호 작용하여 Google 계정을 선택/확인해야 하며, 그 후에는 URL에 인증 코드(예: http://localhost:8000/callback? 코드)가 있는 서버의 페이지로 리디렉션됩니다. =...) 서버는 서버 간 호출을 통해 액세스 토큰에 대한 인증 코드를 교환해야 합니다.

이런 방식으로 이루어진 요청 중 어느 것도 교차 출처가 아니므로 CORS는 전혀 관여하지 않습니다.

handleClick기능이 아닌 유사한 로그인 양식이 필요합니다

으아아아