为什么我的React Router没有通过我的快速路由到服务器?

时间:2018-10-30 01:40:46

标签: reactjs express react-router express-router

我试图将社交登录名添加到我的(已经在工作)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

因此,基本上,请求没有到达快递服务器。实际上,如果我在反应中抓住了所有路线,我可以看到它正在到达目的地。

这是网络日志:

enter image description here

0 个答案:

没有答案