0
간단한 익스프레스 앱을 반응 시키려고합니다. 그러나 간단한 익스프레스 앱 (동형이 아닌)에서 잘 작동하는 github 인증은 반응이 복잡해집니다.노드, 패스포트 및 반응을 사용한 Github 인증이 실패합니다.
github 인증을위한 버튼이 있습니다. 내가
<a href="/auth/github">
로 버튼을 클릭하면
다음 인증
성공하지만 난이 온 클릭 기능과 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을 사용하는 것을 선호한다. 왜냐하면 나는 성공할 때 리다이렉트와 물건을 주문할 수 있기를 바랬다. 그렇지 않으면 내 두 번째 문제가된다. 그러나 어떤 경우에는 분명히 가능하다고 느낀다. 어느 쪽이든