1

In my extjs application , authorization works on the local host , but the page server gives an error : Application error: a client-side exception has occurred (see the browser console for more information) . They want a login, password are saved to the database, when logging in, a redirect to a page protected via axios is successfully performed, and there is an error there. The cook's locale is saved correctly, but apparently cannot be counted from there. enter image description here

I added a header (Access-Control-Allow-Origin) to the request, it didn't help.

My service :

import axios, {AxiosError} from "axios";
import { Router, useRouter } from "next/router";
import { useQuery } from "react-query";

const host = process.env.HOST || 'http://localhost:3000'
// axios instance
export const apiClient = axios.create({
    baseURL: host + "/api",
    withCredentials: true,
    headers: {
        "Content-type": "application/json"
    },
});

export type Admin = {
    id: string
    login: string
}
export type RedirectError = {
    redirectUrl: string
}

export const getSession = async () => {
    const response = await apiClient.get<Admin>('getSession')
    return response.data
}

export const useSession = () => {
    const router = useRouter()
    const { isLoading, error, data, isSuccess } = useQuery<Admin, AxiosError<RedirectError>>('sid', getSession)
    if (error) router.push(error.response.data.redirectUrl)
    return { isLoading, error, data, isSuccess }
}

My api/getSession:

import type { NextApiRequest, NextApiResponse } from 'next'
import checkSession from '../../src/services/checkCookie'

export default async function getSession(req: NextApiRequest, res: NextApiResponse) {
  if (req.method === 'GET') {
    try {
      const sid = req.cookies['sid']
      const admin = await checkSession(sid)
      if (admin) {
        const { id, login } = admin.admin
        return res.send({ id, login })
      }
      const host = process.env.NODE_ENV === 'production' ? process.env.HOST : 'http://localhost:3000'
      return res.status(401).send({ redirectUrl: host + '/admin/login' })
    } catch (error) {
      console.error(error)
      res.status(500).send({ message: "" })
    }
  } else {
    res.status(404).send({ message: "" })
  }
}

checkSession in getSession api :

export default async function   checkSession (token: string) {
    // const token = req.cookies['sid']
    if (typeof window === 'undefined' && token) {
        const unsign = (await import('./signature')).unsign
        const sessionToken = unsign(token, process.env.SECRET!)

        if (sessionToken && typeof sessionToken === 'string') {
            const db = (await import('../../prisma')).default
            const session = await db.session.findUnique({ where: { sessionToken }, 
                include: { admin: true } })
            if (session) {
                return { admin: session.admin }
            }
        }
    }
}

Page with axios

import { NextPage } from "next"
import TableService  from "../src/component/TableService"
import AdminLayout from "../src/component/admin/AdminLayout"
import { Admin, getSession, RedirectError, useSession } from "../src/services/apiClient"
import { useRouter } from "next/router"
import { CircularProgress } from "@mui/material"

const  AdminTable: NextPage = () => {
  const router = useRouter()

  const {isLoading, error, data, isSuccess } = useSession()
    if (isLoading) return <CircularProgress />
    return (
      <>
      {data && <div>{data.login}</div>} 
      {isSuccess &&
        <AdminLayout title="">
          <TableService />
        </AdminLayout>
      }
      {isLoading && <p>Loading..</p>}
      {error && <p>Error occurred!</p>}
      </>
    )
  }
  
  export default AdminTable
  • It looks like your API request is failing due to CORS errors, which then triggers the other client-side errors to occur. Make sure you've configured your API server for CORS. See [How does Access-Control-Allow-Origin header work?](https://stackoverflow.com/questions/10636611/how-does-access-control-allow-origin-header-work). – juliomalves Jul 01 '22 at 18:00

0 Answers0