mod bff teras asp.net dengan isu ubah hala React

Question

Saya cuba memahami cara penghalaan dari hujung hadapan ke hujung belakang sepatutnya berfungsi. Saya menggunakan pakej duende.bff dalam asp.net teras 7 dan tetapkan ini mengikut dokumentasi dan tutorial ini: https://timdeschryver.dev/blog/lets-make-our-spa-more-secure-by -menggunakan- duende-and-auth0 setup-a-net-bff-#creating-a-bff-api. Sekarang saya cuba memahami cara mengubah hala dari hujung hadapan ke hujung belakang supaya pengguna boleh membenarkan penggunaan Auth0.

Saya telah menggunakan teras asp.net dengan projek React dan hanya mengubah suai setupProxy.js untuk menambah titik akhir yang harus dimajukan ke bahagian belakang:

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.split(';')[0] : 'http://localhost:48637';
    
    konteks const = [
    "/bff/log masuk",
    "/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,// Kendalikan ralat untuk menghalang perisian tengah proksi daripada ranap apabila// pelayan web ASP NET Core tidak tersediaonError: onError,secure: false,/ / Nyahkomen baris ini untuk menambah sokongan untuk membuat proksi websockets//ws: true,headers: {Connection: 'Keep-Alive'}});
    
    app.use(appProxy);};

Ini masih menyebabkan URL panggilan balik tidak sepadan. Uri ubah hala hendaklah https://localhost:8443/signin-oidc, tetapi uri ubah hala ialah: https://44466/signin-oidc.

Komponen log masuk saya kini sangat mudah:

import React daripada 'react';
    import Log Masuk dari './Login_logo';
    import './Login_page.css';
    
    const Login_page = () =>
    
        kembali (
            <div className="log masuk-halaman">
                <div className='login-page-header'>
                    <Logo Masuk />
                    <h1 className="tajuk">sipster</h1>
                </div>
                <div className='login-page-input'>
                    <button className='login-button'> <a href="/bff/login">Log masuk</a></button>
                </div>
            </div>
        );
    };
    
    eksport lalai Log_page;

Answer 1

Apabila anda menghantar permintaan menggunakan url (port 44466) ia berfungsi seperti yang diharapkan:

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

Pelayan pembangunan akan menyedari bahawa ia bukan aset statik dan memproksi permintaan anda http://localhost:8443/.... sebagai sandaran. DokumenBerkaitan

Serupa dengan gambar

Jika anda mengubah hala pada bahagian belakang ia akan menghantar kod patung 302 dengan lokasi sasaran dan permintaan lain akan dihantar seperti yang ditunjukkan

Anda boleh menekan F12 untuk memilih NetWork dan menonton permintaan yang anda hantar