récupérer l'accès à https://accounts.google .com/o/oauth2/v2/auth bloqué par CORS

Question

J'envoie une récupération de React vers Express pour m'authentifier auprès de Google, mais mon accès est bloqué par une erreur CORS. Je redirige les requêtes POST de React vers une URL Google pour l'authentification. J'ai essayé d'utiliser cors dans une application Express mais j'ai toujours la même erreur. pour avoir

const handleClick = (e) => {
    fetch('http://localhost:8000/api/mail/login', {
        method: 'POST'
    })
    .then(res => res.text())
}

Utilisation de cors dans Express app.js

app.use(cors())

Essayez de rediriger vers l'authentification Google

const oauth2Client = new google.auth.OAuth2(
    process.env.CLIENT_ID,
    process.env.CLIENT_SECRET,
    process.env.REDIRECT_URI
)

const url = oauth2Client.generateAuthUrl({
    access_type: 'offline',
    scope: process.env.SCOPE
})

const gmail = google.gmail({
    version: 'v1',
    auth: oauth2Client
})

router.post('/login', (req, res, next) => {
    res.redirect(url)
})

Erreur : accès à "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" pour l'extraction - ngpfd4ll798v42gfclh7cms9ndqstt32. apps.googleusercontent.com&redirect_uri=http%3A%2F%2Flocalhost%3A8000' (redirigé depuis 'http://localhost:8000/api/mail/login') depuis l'origine 'http://localhost:3000' a été la politique CORS Blocage : L'en-tête 'Access-Control-Allow-Origin' n'existe pas sur la ressource demandée. Si une réponse opaque répond à vos besoins, définissez le mode de requête sur « no-cors » pour obtenir la ressource avec CORS désactivé.

Answer 1

Le flux d'authentification doit s'effectuer dans un contexte de navigation visible, sans utiliser de fetch requêtes. En d'autres termes : vous devez naviguer votre onglet actuel vers (ou ouvrir un nouvel onglet) http://localhost:8000/api/mail/login, qui sera redirigé vers https://accounts.google. com/o/oauth2/v2/auth?... et la page devient visible. L'utilisateur doit maintenant interagir avec la page pour sélectionner/confirmer son compte Google, après quoi il sera redirigé vers une page de votre serveur avec le code d'autorisation dans l'URL (par exemple, http://localhost:8000/callback? code =...) et votre serveur doit échanger le code d'autorisation pour le jeton d'accès via un appel de serveur à serveur.

Aucune des demandes faites de cette manière n'est d'origine croisée, donc CORS n'est pas du tout impliqué.

Vous avez besoin d'un formulaire de connexion similaire, pas d'une handleClick fonction

<form action="http://localhost:8000/api/mail/login" method="post">
  <input type="submit" value="Press to log in"/>
</form>