Node JS API 获取数据失败

Question

我最近使用 express 和 MongoDB 创建了一个 API，在 fetch() 的帮助下，在我的 Next JS 应用程序中使用它之前，邮递员一切正常。正常的 GET 请求有效，但 POST 请求似乎无效。即使我已将 cors 库添加到 API 中，它也会返回 cors 错误。这是下一个 js 应用程序的代码：

import { SparklesIcon, QuestionMarkCircleIcon } from '@heroicons/react/24/solid'

export default function Home () {
    function getData () {
        fetch('http://localhost:3000/api/auth/login', {
            method: 'POST',
            headers: {
                'Content-type': 'application/json'
            },
            body: {
                email: "ceo-jedidiah@xenon-inc.in",
                password: "M!nnu2009"
            }
        }).then(res => res.json()).then(data => {
            console.log(data)
        })
    }

    return (
        <div className="w-screen h-screen bg-black text-white font-poppins">
            <nav className="w-screen h-14 px-4 flex flex-row items-center justify-center border-white select-none relative">
                    <img src="/logo.svg" alt="" className="w-10 h-10 rounded-full" />
                    <h1 className="font-bold ml-2 text-2xl text-white font-nunito mr-auto">Xenon</h1>
                    <ul className="flex flex-row">
                        <li className="m-4 opacity-50 hover:opacity-100 transition-all cursor-pointer">About Us</li>
                        <li className="m-4 opacity-50 hover:opacity-100 transition-all cursor-pointer">Explore</li>
                        <li className="m-4 opacity-50 hover:opacity-100 transition-all cursor-pointer">Services</li>
                        <li className="m-4 opacity-50 hover:opacity-100 transition-all cursor-pointer">Products</li>
                        <li className="m-4 opacity-50 hover:opacity-100 transition-all cursor-pointer">Pricing</li>
                        <li className="m-4 opacity-50 hover:opacity-100 transition-all cursor-pointer">API</li>
                    </ul>
                    <button className="py-1 px-3 bg-white border-2 border-white hover:bg-black hover:text-white transition-all text-black rounded-md ml-4 text-sm" onClick={getData}>Sign Up</button>
            </nav>
            <main>
                <section className="w-screen h-[calc(100vh-56px)] flex flex-col items-center justify-center">
                    <h1 className="text-8xl font-black text-indigo-500">Think.</h1>
                    <h1 className="text-8xl font-black text-blue-500">Build.</h1>
                    <h1 className="text-8xl font-black text-green-500">Publish.</h1>
                    <p className="w-[1150px] text-center mt-4 text-zinc-600 text-2xl">Xenon is a platform to hire someone to build you something at very cheap and affordable prices. Also you can showcase your own work on the explore page.</p>
                    <div className="flex flex-row items-center justify-center mt-8">
                        <button className="py-2 px-20 bg-white border-2 border-white hover:bg-black hover:text-white transition-all text-black rounded-md ml-4 text-md flex flex-row items-center justify-center"><SparklesIcon className='w-6 mr-2' /> Get Started</button>
                        <button className="py-2 px-20 bg-black border-2 border-white hover:bg-white hover:text-black text-white transition-all rounded-md ml-4 text-md flex flex-row items-center justify-center"><QuestionMarkCircleIcon className='w-6 mr-2' /> Learn More</button>
                    </div>
                </section>
            </main>
        </div>
    )
}

浏览器中的错误： error

我试图在我的 API 上使用登录方法，它应该返回一个带有 json 网络令牌和用户数据的对象

Answer 1

请确保您是否在 API 中添加了这样的 cors

const app = express();
const cors = require('cors');
app.use(cors({
  origin: ['Your first url', 'Your second url if you have ..']
}));

您可能会使用 http://localhost:3000。