Why NextJs is making a xhr request instead of redirect to crossdomain url?

I have SSO based project. which main module is Django project (drf) and modules (they are separated projects preplanned to be drf+nextjs) supposed to authenticate and authorize requesting this module. Now in dev environment I have 3 servers

  1. Main app (auth_module - Django 14.2.12) localhost:8080
  2. Store app backend (warehouse_backend - Django 5.1.1) localhost:8082
  3. Store app frontend (warehouse_frontend - Nextjs 14.2.12) localhost:3000

So authentication flow happens the way below:

  1. When user enter http://localhost:3000/ warehouse_frontend axios GET request to /api/auth/user/ withCredentials=true 2.In /app/api/auth/user/route.js I have code that request to auth_module http://localhost:8080/api/user/ with cookies it should return user data if there is a access token in cookie.
  2. if there is no token in cookie it auth_module return 401 unauthorized response and in route.js I should redirect to http://localhost:8080/login?module=http://localhost:3000 auth_module login page it will handle the login with username and password. The Problem I face here in redirection route.js. Expected behavior is in browser the changes to http://localhost:8080/login?module=http://localhost:3000 but it fetchs url like xhr developer tools screenshot
  • /app/layout.js

export default function RootLayout({children}) {

    return (
        <StoreProvider>
            <html lang="en">
            <body>
            <Container maxWidth={'xl'} id={'root'}>
                <Header/>
                <UserFetcher/>
                {children}
            </Container>
            </body>
            </html>
        </StoreProvider>
    )
}
  • UserFetcher.js
useEffect(() => {
        (async () => {
            try {
                console.log('effect')
                const res = await axios('/api/auth/user', {
                    method: 'GET',
                    withCredentials: true,
                    headers: {
                        'Accept': 'application/json',
                        'Content-Type': 'application/json',
                    }
                })
                console.log('res:', res)
                if (res.statusText !== 'OK') {
                    console.log(res.statusText)
                } else {
                    console.log('user:', res.data)
                    const user = res.data
                    if (user) {
                        dispatch(setUser(user))
                    }
                }
            } catch (e) {
                console.log(e)
            }
        })()
    }, []);
  • /app/api/auth/user/route.js
import {redirect} from 'next/navigation';

export async function GET(request) {
        redirect('http://localhost:8080/login?module=http://localhost:3000')
        // tried to different variations 
        // NextResponse.redirect('http://localhost:8080/login?module=http://localhost:3000')
        // return them both and just call
        // all same result 
}

Deepnote: I tried other domains like https://google.com it tries to fetch it too. I tried redirects in next.config.js same result

module.exports = {
    async redirects() {
        return [
            {
                source: '/mis/:path*',
                destination: 'http://localhost:8080/login?module=http://localhost:3000',
                permanent: true,
            },
        ]
    },
}

It worked just fine but I can't find what corrupted it while development. And I can't just go back to previous versions I did so many changes in project.

EDIT:

This code block works in middleware.js but not route.js.

        return NextResponse.redirect(MIS_LOGIN_URL)
Back to Top