具有React重定向问题的asp.net core bff模式
P粉710478990
P粉710478990 2023-09-01 19:22:18
[React讨论组]

我试图了解从前端到后端的路由应该如何工作。 我在 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 进行授权。

我已将 asp.net core 与 React 项目一起使用,并且仅修改了 setupProxy.js 以添加应转发到后端的端点:

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);};

这仍然导致回调 URL 不匹配。 重定向 uri 应为 https://localhost:8443/signin-oidc,但重定向 uri:https://44466/signin-oidc。

我的登录组件现在非常简单:

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;

P粉710478990
P粉710478990

全部回复(1)
P粉545956597

当您使用 url(端口 44466)发送请求时,它按预期工作:

"/bff/login",
"/api",
"/signin-oidc",
"/signout-callback-oidc"

开发服务器将识别出它不是静态资产,并将您的请求代理到 http://localhost:8443/.... 作为后备。 文档相关

与图片类似

如果您在后端重定向,它会发送带有目标位置的 302 雕像代码,并且会发送另一个请求,如图所示

您可以按 F12 选择 NetWork 并观察您发送的请求

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号