我正在构建一个使用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,而不是响应路由器/浏览器解释该URL,因此它返回cannot GET /myaccounts
。我已经研究过使用类似Next.js的库为React客户端使用服务器端渲染,但是我想知道是否有一种方法可以不必显着重构我的代码。
我的React Router设置:
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流程。
任何帮助将不胜感激。