Node.js React拦截/auth/twitter/when HTTPS。我想从节点服务器而不是react应用程序访问/auth/twitter/

要作出反应的新节点

我有一个ReactReact锅炉板的实现，其中webpack etc/Node运行在Heroku上的同一台主机上

我正在使用passport和twitter宣誓会话。 当我到达端点时，一切都相应地工作，并且运行本地dev服务器

当我试图通过HTTPS访问它时，React会截获它并显示一个未找到的页面

我正在努力理解为什么会发生这种情况，以及在类似于生产的环境中处理这种情况的最佳方法。我希望在同一台主机上处理/auth/twitter和/auth/twitter/callback

我曾尝试在misc places和package.json中添加http代理，但没有成功，我正在旋转轮子

先谢谢你

认证路由

module.exports = app => {
  app.get('/api/logout', (req, res) => {
    // Takes the cookie that contains the user ID and kills it - thats it
    req.logout();
    // res.redirect('/');
    res.send(false);
    // res.send({ response: 'logged out' });
  });
  app.get('/auth/twitter', passport.authenticate('twitter'));
  app.get(
    '/auth/twitter/callback',
    passport.authenticate('twitter', {
      failureRedirect: '/'
    }),
    (req, res) => {
      res.redirect('/dashboard');
    }
  );
  app.get('/api/current_user', (req, res) => {
    // res.send(req.session);
    // res.send({ response: req.user });
    res.send(req.user);
  });
};

index.js

app.use(morgan('combined'));
app.use(bodyParser.json());
app.use(
  //
  cookieSession({
    // Before automatically expired - 30 days in MS
    maxAge: 30 * 24 * 60 * 60 * 1000,
    keys: [keys.COOKIE_KEY]
  })
);
app.use(passport.initialize());
app.use(passport.session());

require('./routes/authRoutes')(app);
// They export a function - they turn into a function - then immediately call with express app object

app.use('/api/test', (req, res) => {
  res.json({ test: 'test' });
});

setup(app, {
  outputPath: resolve(process.cwd(), 'build'),
  publicPath: '/',
});

// get the intended host and port number, use localhost and port 3000 if not provided
const customHost = argv.host || process.env.HOST;
const host = customHost || null; // Let http.Server use its default IPv6/4 host
const prettyHost = customHost || 'localhost';

/ Start your app.
app.listen(port, host, async err => {
  if (err) {
    return logger.error(err.message);
  }

  // Connect to ngrok in dev mode
  if (ngrok) {
    let url;
    try {
      url = await ngrok.connect(port);
    } catch (e) {
      return logger.error(e);
    }
    logger.appStarted(port, prettyHost, url);
  } else {
    logger.appStarted(port, prettyHost);
  }
});

console.log('Server listening on:', port);




/**
 * Front-end middleware
 */
module.exports = (app, options) => {
  const isProd = process.env.NODE_ENV === 'production';
  if (isProd) {
    const addProdMiddlewares = require('./addProdMiddlewares');
    addProdMiddlewares(app, options);
  } else {
    const webpackConfig = require('../../internals/webpack/webpack.dev.babel');
    const addDevMiddlewares = require('./addDevMiddlewares');
    addDevMiddlewares(app, webpackConfig);
  }

  return app;
};

const path = require('path');
const express = require('express');
const compression = require('compression');

module.exports = function addProdMiddlewares(app, options) {
  // messing around here 
  const proxy = require('http-proxy-middleware');
  const apiProxy = proxy('/api', { target: 'http://localhost:3000' });
  const apiProxy2 = proxy('/auth', { target: 'http://localhost:3000' });
  app.use('/api', apiProxy);
  app.use('/auth/*', apiProxy2);
  const publicPath = options.publicPath || '/';
  const outputPath = options.outputPath || path.resolve(process.cwd(), 'build');

  // compression middleware compresses your server responses which makes them
  // smaller (applies also to assets). You can read more about that technique
  // and other good practices on official Express.js docs http://mxs.is/googmy
  app.use(compression());
  app.use(publicPath, express.static(outputPath));

  app.get('*', (req, res) =>
    res.sendFile(path.resolve(outputPath, 'index.html')),
  );
};

const path = require('path');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');
const webpackHotMiddleware = require('webpack-hot-middleware');

function createWebpackMiddleware(compiler, publicPath) {
  return webpackDevMiddleware(compiler, {
    logLevel: 'warn',
    publicPath,
    silent: true,
    stats: 'errors-only',
  });
}

module.exports = function addDevMiddlewares(app, webpackConfig) {
  const compiler = webpack(webpackConfig);
  const middleware = createWebpackMiddleware(
    compiler,
    webpackConfig.output.publicPath,
  );

  app.use(middleware);
  app.use(webpackHotMiddleware(compiler));

  // Since webpackDevMiddleware uses memory-fs internally to store build
  // artifacts, we use it instead
  const fs = middleware.fileSystem;

  app.get('*', (req, res) => {
    fs.readFile(path.join(compiler.outputPath, 'index.html'), (err, file) => {
      if (err) {
        res.sendStatus(404);
      } else {
        res.send(file.toString());
      }
    });
  });
};

---

您可能有一个服务工作者正在运行客户端并拦截请求，然后从缓存中为您的react应用程序提供服务

给出的一个提示是，服务工作者将仅通过https安装/运行

---

解决方案可能是编辑服务工作者代码，使其不用于身份验证URL，或者将其全部禁用。如果您不打算围绕它构建应用程序，这可能会带来更多麻烦。

我可以使用任何axios访问api服务器。但是，获取“/api/current_user”等，如果我试着去那个直接的url，我会和它相交。