(すでに動作している)react/expressアプリにソーシャルログインを追加しようとしましたが、localhostで動作しました。ただし、本番環境にデプロイすると、ソーシャル ログインが機能しません。こんな感じで始められます
<a href="/api/auth/google">Google+</a>
ただし、本番環境では、ブラウザのhttps://sample.com/api/auth/googleにとどまります。そのため、反応ルーターがエクスプレスの前に最初にそれをキャッチしているようです。どのように?
localhost では、package.js にプロキシがあるため機能します。
"proxy": {
"/api": {
"target": "http://localhost:4000",
"ws": true
}
さて、どうすれば本番環境でこれを行うことができますか?
ところで、私のサーバー API はすべて「/api/...」で始まります。また、私の反応ルートには、キャッチオールコンポーネントがありません。
更新:ここに私のserver.jsがあります
var express = require('express');
var session = require('express-session');
var bodyParser = require('body-parser');
var flash = require('connect-flash');
var cookieParser = require('cookie-parser');
var path = require('path');
var fs = require('fs');
var app = express();
var isSecured = true;
app.isDevMode = app.get('env') == 'development'
require('./server/config/log')(app)
var port = (process.env.PORT || app.isDevMode) ? 4000 : (isSecured ? 443 : 80);
app.set('port', port);
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json({ limit: '10mb' }));
app.use(flash()); // use connect-flash for flash messages stored in session
var server = require('http').createServer(app);
if (!app.isDevMode && isSecured) {
var options = {
ca: fs.readFileSync('ca_bundle.crt'),
key: fs.readFileSync('private.key'),
cert: fs.readFileSync('certificate.crt')
}
server = require('https').createServer(options, app);
}
db.on('error', console.error.bind(console, 'connection error:'));
db.once('open', function () {
console.log('Connected to MongoDB');
var routes = require('./server/routes');
routes.init(app);
if (app.isDevMode) {
app.use(express.static(__dirname));
}
else {
app.use(express.static(path.join(__dirname, 'client/build')));
app.get('/*', function (req, res) {
res.sendFile(path.join(__dirname, 'client/build', 'index.html'));
});
if (isSecured) {
require('http').createServer(function (req, res) {
res.writeHead(307, { "Location": "https://" + req.headers['host'] + req.url });
res.end();
}).listen(80);
}
}
server.listen(app.get('port'), function () {
console.log('Server listening on port ' + app.get('port'));
});
});
module.exports = app;
これが私のルートです:
app.get('/api/auth/google', passport.authenticate('google', { scope: ['https://www.googleapis.com/auth/userinfo.profile', 'https://www.googleapis.com/auth/userinfo.email'] }))
app.get('/api/callback/google', passport.authenticate('google', {successRedirect: '/?action=login&provider=google', failureRedirect: '/?action=login'}))
更新: ここにモーガン ログがあります。参照用に各行に番号を追加しました。「/api/auth/google」を送信するリンクをクリックすると 4 行目が始まり、6 行目で終了します。
1. GET /api/get/list?parm={%22kind%22:%22Prod%22,%22limit%22:5,%22createdOn%22:-1} 304 - - 22.959 ms
2. GET /images/logo.png 200 3432 - 17.410 ms
3. GET /service-worker.js 200 3097 - 3.398 ms
4. GET /static/js/main.cef8cdac.js 304 - - 5.180 ms
5. GET /images/two.png 304 - - 4.908 ms
6. GET /service-worker.js 200 3097 - 3.838 ms
というわけで、基本的にエクスプレスサーバーにはリクエストが来ませんでした。実際、react ですべてのルートをキャッチした場合、そこにヒットしていることがわかります。
ネットワークログは次のとおりです。