Ich versuche, eine einfache Express-App zu bewegen, um zu reagieren, aber die Github-Authentifizierung, die auf der einfachen Express-App funktioniert (nicht isomorph), wird kompliziert mit reagieren.Github Authentifizierung mit Knoten, Pass und reagieren fehlschlägt
Es gibt eine Schaltfläche für die github-Authentifizierung.
Wenn ich auf die Schaltfläche klicken mit
<a href="/auth/github">
dann die Authentifizierung erfolgreich
, aber wenn ich eine Onclick-Funktion und xhr.get verwenden, dann scheitert es mit
No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1:3000' is therefore not allowed access.
Anmeldung .jsx
export default class Login extends React.Component {
handleClick (event) {
event.preventDefault()
let xhr = new XMLHttpRequest();
xhr.open('get', '/auth/github');
xhr.send();
}
render() {
return (
<div className="login">
<button className="btn" id="login-btn" onClick={this.handleClick.bind(this)}>
<img src="/public/img/github_32px.png" alt="github logo" />
<p>LOGIN WITH GUTHUB</p>
</button>
</div>
)
}
}
Das scheitert !! mit dem Fehler control-allow-origin.
während
export default class Login extends React.Component {
render() {
return (
<div>
<a href="/auth/github">
<div className="btn" id="login-btn">
<img src="/public/img/github_32px.png" alt="github logo" />
<p>LOGIN WITH GITHUB</p>
</div>
</a>
</div>
)
}
Dies gelingt!
server.js
var express = require('express');
var mongoose = require('mongoose');
var passport = require('passport');
var session = require('express-session');
var routes = require('./app/routes');
var app = express();
require('dotenv').load();
require('./app/config/passport')(passport);
mongoose.connect(process.env.MONGO_URI);
app.use('/controllers', express.static(process.cwd() + '/app/controllers'));
app.use('/public', express.static(process.cwd() + '/public'));
app.use(session({
secret: process.env.SECRET,
resave: false,
saveUninitialized: true
}));
app.use(passport.initialize());
app.use(passport.session());
routes(app, passport);
var port = process.env.PORT || 8080;
app.listen(port, function() {
console.log('Node.js listening on port ' + port + '...');
});
app/routes.js
module.exports = function (app, passport) {
app.route('/')
.get(function (req, res) {
res.sendFile(process.cwd() + '/public/index.html')
})
app.route('/auth/github')
.get(passport.authenticate('github'));
app.route('/auth/github/callback')
.get(passport.authenticate('github', {
successRedirect: '/',
failureRedirect: '/login'
}));
}
Wie kann ich diese Arbeit die xhr mit? Oder besser: Warum funktioniert es nicht?
Ich würde viel lieber die xhr verwenden, wenn möglich, da ich gehofft hatte, dass ich beim Erfolg Umleitungen und Zeug bestellen könnte, was sonst mein zweites Problem ist ... aber auf jeden Fall denke ich, dass es möglich sein sollte tut dies entweder Weise