0

(すでに動作している)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 ですべてのルートをキャッチした場合、そこにヒットしていることがわかります。

ネットワークログは次のとおりです。

ここに画像の説明を入力

4

0 に答える 0