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,因爲我希望成功時我可以訂購重定向和其他東西,否則我的第二個問題......但無論如何我覺得應該有可能做到這一點無論哪種方式