【发布时间】：2020-03-01 06:12:45
【问题描述】：
我正在构建一个使用 True Layer 开放式银行 API 的网络应用程序。该应用程序有一个使用 React 路由器的 React 前端和一个 Express 和 Nodejs 后端。目前我正在使用 react build 脚本来提供静态文件：
const app = express();
app.use(cors());
app.use(express.json());
app.use(express.static('../client/build'));
app.get('*', (req, res) => {
res.sendFile('index.html', {root: path.join(__dirname, '../client/build/')});
});
const PORT = process.env.PORT || 3001;
app.listen(PORT, () => {
console.log("Server listening on port: ", PORT);
});
// The API routes are imported below
这个解决方案效果很好，但是当用户被重定向到 True Layer 的身份验证页面时，会生成 OAuth 代码并作为 url 查询传递回客户端上的路由。问题是，当 True Layer 将用户重定向回我的应用程序时，url 由服务器而不是 react 路由器/浏览器解释，因此它返回cannot GET /myAccounts。我已经研究过使用 Next.js 之类的库为 React 客户端使用服务器端渲染，但我想知道是否有一种方法可以做到这一点，而无需大幅重构我的代码。
我的 React 路由器设置：
class App extends Component {
render() {
return (
<Router>
<Route name="Landing" path="/" exact component={Login} />
<Route name="Login" path="/login" exact component={Login} />
<Route name="MyAccounts" path="/myAccounts" exact component={Home} />
</Router>
);
}
}
/myAccounts 路由渲染Home 组件/页面，其中提取了code 参数：qs.parse(props.location.search)['?code']，并发送到我的服务器以完成 OAuth 过程。
任何帮助将不胜感激。
【问题讨论】：
-
剩下的路线是什么？你有一个
app.get('*', ...)，它应该会捕获所有的 GET 请求，所以不会加起来。 -
@Jacob 其余路由只是查询外部 API 或处理数据的 GET 和 POST 路由的分类。问题是，当 True Layer 的身份验证页面将用户重定向回我在
/myAccounts?code=478hds...的应用程序时，服务器的行为就好像它是对其中一个路由的请求，但该请求是针对 React DOM 路由器的/myAccounts路由的code参数被提取：qs.parse(props.location.search)['?code']并发送回我的服务器以完成 OAuth 过程。抱歉，如果我最初的问题不清楚，我现在将对其进行编辑。 -
您无法避免来自单独站点的重定向访问您的服务器，如果这就是您所追求的。您真正能做的就是确保您的服务器为这些请求提供页面。如果此“True Layer”登录页面是一个单独的站点，您的原始文档将被卸载。
-
@Jacob 是的，这是有道理的，我认为会是这种情况，但希望我可以使用某种技巧来保持页面加载/不需要 SSR。不过感谢您的帮助。
标签： javascript node.js reactjs express react-router