Wir versuchen, Github oAuth in unserer App mit Passport.js zu implementieren. Wenn der Benutzer den Endpunkt durch Klicken auf ein Anchor-Tag/href erreicht, funktioniert es einwandfrei. Wenn wir jedoch stattdessen einen Click-Handler verwenden, um eine Ajax-Anfrage zu initiieren, erhalten wir einen CORS-Fehler vom Github-Server. Warum?Klicken Sie auf einen href zu unserem Github oAuth-Endpunkt, aber eine AJAX-Anforderung an denselben Endpunkt verursacht einen CORS-Fehler?
Server-Side-Code:
app.get('/auth/github',
passport.authenticate('github', { scope: [ 'user:email' ] }));
app.get('/auth/github/callback',
passport.authenticate('github', { failureRedirect: '/login' }),
function(req, res) {
console.log('Github authentication successful!');
res.redirect('/');
});
Client-Seite Code (wir verwenden Reagieren):
-> Werke:
<a href='/auth/github'>Contact</a>;
-> funktioniert nicht - CORS Fehler :
handleContactAuth(event) {
$.ajax({
url: '/auth/github',
method: 'GET',
success: data => console.log('Contact Auth response: ', data),
error: err => console.log('Error connecting to GitHub.', err)
});
}
HINWEIS: Dies ist a Click-Handler auf die React-Komponente und funktioniert gut, da die Ajax-Anfrage ausgelöst wird. Ich bin mir bewusst, dass wir die Antwort derzeit nicht behandeln, abgesehen von nur einer console.log.
-> CORS Fehler wir auf der Client-Seite zu sehen, wenn statt href AJAX-Methode:
XMLHttpRequest cannot load https://github.com/login/oauth/authorize? response_type=code&redirect_uri=ht…auth%2Fgithub%2Fcallback&scope=user%3Aemail&client_id=our_client_code. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.
Irgendwelche Ideen? Würde mich über Einsichten freuen - vielen Dank.
... Ich habe genau das gleiche Problem. Hast du eine Lösung gefunden? – roberto