具有React重定向問題的asp.net core bff模式

Question

我試著去了解從前端到後端的路由應該如何運作。 我在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 / 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;

Answer 1

當您使用 url（連接埠 44466）發送請求時，它會按預期工作：

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

開發伺服器將識別出它不是靜態資產，並將您的請求代理到 http://localhost:8443/.... 作為後備。 文檔相關

與圖片類似

如果您在後端重定向，它會發送帶有目標位置的 302 雕像程式碼，並且會發送另一個請求，如圖所示

您可以按 F12 選擇 NetWork 並觀察您傳送的請求

#