React 리디렉션 문제가 있는 asp.net 코어 bff 모드

Question

프론트엔드에서 백엔드로의 라우팅이 어떻게 작동하는지 이해하려고 노력 중입니다. 저는 asp.net 코어 7에서 duende.bff 패키지를 사용하고 있으며 문서와 이 튜토리얼에 따라 이를 설정했습니다: https://timdeschryver.dev/blog/lets-make-our-spa-more-secure-by -using- duende-and-auth0 setup-a-net-bff-#creating-a-bff-api. 이제 사용자가 Auth0을 사용하여 승인할 수 있도록 프런트엔드에서 백엔드로 리디렉션하는 방법을 이해하려고 합니다.

저는 React 프로젝트와 함께 asp.net 코어를 사용했으며 백엔드로 전달되어야 하는 엔드포인트를 추가하기 위해 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 컨텍스트 = [
    "/bff/로그인",
    "/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,// ASP NET Core 웹 서버를 사용할 수 없는 경우 프록시 미들웨어가 충돌하지 않도록 오류를 처리합니다.onError: onError,secure: false,/ / 웹소켓 프록시 지원을 추가하려면 이 줄의 주석 처리를 제거하세요//ws: true,headers: {Connection: 'Keep-Alive'}});
    
    app.use(appProxy);};

이렇게 해도 콜백 URL이 일치하지 않습니다. 리디렉션 URI는 https://localhost:8443/signin-oidc여야 하지만 리디렉션 URI는 https://44466/signin-oidc입니다.

내 로그인 구성요소는 이제 매우 간단해졌습니다.

'react'에서 React를 가져옵니다.
    './Login_logo'에서 LoginLogo를 가져옵니다.
    import './Login_page.css';
    
    const Login_page = () =>
    
        반품 (
            <div className="로그인 페이지">
                <div className='login-page-header'>
                    <로그인로고 />
                    <h1 className="제목">십스터</h1>
                </div>
                <div className='login-page-input'>
                    <button className='login-button'> <a href="/bff/login">로그인</a></button>
                </div>
            </div>
        );
    };
    
    기본 Login_page 내보내기;

Answer 1

URL(포트 44466)을 사용하여 요청을 보내면 예상대로 작동합니다.

으아악

개발 서버는 정적 자산이 아니라는 것을 인식하고 대체 요청을 http://localhost:8443/....로 프록시합니다. 문서관련

사진과 비슷해요

백엔드에서 리디렉션하면 대상 위치와 함께 302 상태 코드가 전송되고 표시된 대로 다른 요청이 전송됩니다

F12를 눌러 NetworkWork를 선택하고 보내는 요청을 볼 수 있습니다.