NextJS 无法识别带有 Bcrypt 的发布请求

Question

我正在使用 nextJS 构建一个简单的登录功能，到目前为止，我能够从注册页面存储新的用户名和加密密码。登录功能类似，除了我需要比较数据库和输入中的密码。我使用postgres、prisma 作为我的后端。

问题

但是，当我尝试比较输入密码和 db 登录密码时，由于某种原因，请求方法没有得到处理，尽管我在终端中没有收到任何错误。为什么我的发帖请求：比较 2 个密码不起作用？

当我提出请求时，我觉得缺少了什么？

代码

login.tsx

import type { NextPage } from 'next'
import { useState } from 'react'
const Login: NextPage = () => {
    const [email, getEmail] = useState('')
    const [password, getPassword] = useState('')

    const signIn = async () => {
        console.log("Sign in function")
        try {
            if (true) {
                const body = {
                    email,
                    password,
                }

                await fetch('/api/login/', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify(body),
                })
                console.log('requested')
            }
        } catch (e) {
            console.log(e)
        }
    }

    return (
        <>

            <form className="space-y-6" action="#" method="POST">
                <div>
                    <label htmlFor="email" >
                        Email address
                    </label>
                    <div className="mt-1">
                        <input
                            id="email"
                            name="email"
                            type="email"
                            autoComplete="email"
                            required
                            onChange={(e) => { getEmail(e.target.value) }}
                        />
                    </div>
                </div>

                <div>
                    <label htmlFor="password" className="block text-sm font-medium text-gray-700">
                        Password
                    </label>
                    <div className="mt-1">
                        <input
                            id="password"
                            name="password"
                            type="password"
                            autoComplete="current-password"
                            required
                            onChange={(e) => { getPassword(e.target.value) }}
                        />
                    </div>
                </div>
                <button
                    onClick={() => { signIn }}
                >
                    Sign in
                </button>
        </form>

        </>
    )
}


export default Login

/api/login/ (/api/login.tsx)

import { compare } from 'bcrypt';
import { NextApiRequest, NextApiResponse } from 'next';
import prisma from './api.prisma';

export default async function apilog (req: NextApiRequest, res: NextApiResponse) {

    const { 
        email,
        password,
      } = req.body

    console.log("From body", email, password)
    
    const user = await prisma.user.findUnique({
        where:{
            email: email
        }
    })

    const hash: any = user?.password

    compare(password, hash, (err, same)=>{
        if(same){
            console.log("Logged in!")
        }
        else{
            console.log("Not logged in!")
        }
    });


}

Answer 1

当我删除 <form> 标签时，它起作用了。

更多请见here

Answer 2

出于好奇，在 login.tsx 文件中的 getch 函数中，try 阻止方法 id post。它应该是 get 方法还是两者中的任何一个都可以正常工作？