0
我想移动一个简单的快速应用程序来作出反应,但github身份验证,它在简单的快速应用程序(而不是同构),工作正常,变得复杂的反应。Github身份验证与节点,护照和反应失败
有一个按钮用于github身份验证。
如果我点击与
<a href="/auth/github">
的按钮,然后验证成功
,但如果我使用一个onclick功能和xhr.get,那么它失败
No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1:3000' is therefore not allowed access.
登录.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>
)
}
}
这个失败!与控制允许来源错误。
而
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>
)
}
这成功!
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 + '...');
});
应用程序/ 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'
}));
}
我怎样才能使使用XHR这项工作?或者说,为什么它不起作用?
如果可能的话,我更愿意使用xhr,因为我希望成功时我可以订购重定向和其他东西,否则我的第二个问题......但无论如何我觉得应该有可能做到这一点无论哪种方式