NextJS 无法识别 Bcrypt 的发布请求

Question

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

问题

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

当我提出请求时，我认为缺少某些内容？

代码

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>标签时，它起作用了。

看这里了解更多