具有React重定向问题的asp.net core bff模式
P粉710478990
2023-09-01 19:22:18
<p>我试图了解从前端到后端的路由应该如何工作。
我在 asp.net core 7 中使用 duende.bff 包，并根据文档和本教程进行此设置：https://timdeschryver.dev/blog/lets-make-our-spa-more-secure-by -使用-duende-and-auth0设置-a-net-bff-#creating-a-bff-api。
现在我试图了解如何从前端重定向到后端，以便用户可以使用 Auth0 进行授权。</p>
<p>我已将 asp.net core 与 React 项目一起使用，并且仅修改了 setupProxy.js 以添加应转发到后端的端点：</p>
<pre class="brush:php;toolbar:false;">const { createProxyMiddleware } = require('http-proxy-middleware');const { env } = require('process');
const target = env.ASPNETCORE_HTTPS_PORT ? https://localhost:${env.ASPNETCORE_HTTPS_PORT} :env.ASPNETCORE_URLS ? env.ASPNETCORE_URLS.split(';')[0] : 'http://localhost:48637';
const context = [
"/bff/login",
"/api",
"/signin-oidc",
"/signout-callback-oidc"
];
const onError = (err, req, resp, target) => {console.error(${err.message});}
module.exports = function (app) {const appProxy = createProxyMiddleware(context, {target: target,// Handle errors to prevent the proxy middleware from crashing when// the ASP NET Core webserver is unavailableonError: onError,secure: false,// Uncomment this line to add support for proxying websockets//ws: true,headers: {Connection: 'Keep-Alive'}});
app.use(appProxy);};</pre>
<p>这仍然导致回调 URL 不匹配。
重定向 uri 应为 https://localhost:8443/signin-oidc，但重定向 uri：https://44466/signin-oidc。</p>
<p>我的登录组件现在非常简单：</p>
<pre class="brush:php;toolbar:false;">import React from 'react';
import LoginLogo from './Login_logo';
import './Login_page.css';
const Login_page = () => {
return (
<div className="login-page">
<div className='login-page-header'>
<LoginLogo />
<h1 className="title">sipster</h1>
</div>
<div className='login-page-input'>
<button className='login-button'> <a href="/bff/login">Login</a></button>
</div>
</div>
);
};
export default Login_page;</pre></p>
当您使用 url（端口 44466）发送请求时，它按预期工作：
开发服务器将识别出它不是静态资产，并将您的请求代理到
http://localhost:8443/....作为后备。 文档相关与图片类似
如果您在后端重定向，它会发送带有目标位置的 302 雕像代码，并且会发送另一个请求，如图所示
您可以按 F12 选择 NetWork 并观察您发送的请求