Next.js 使用 API Route 时无法 fetch data 的问题

Next.js 使用 API Route 时无法 fetch data 的问题

博主最近在学习Next.js，在使用Next.js的API Route来获取数据的过程中，遇到了 Fail to fetch data 的问题。

在 src/app/blog/page.tsx 中，获取数据：

// FETCH DATA WITH AN API
const getData = async (slug) => {
    const res = await fetch(`https://localhost:3000/api/blog/${slug}`, {next:{revalidate:3600}}) //data fetch

    if(!res.ok){
        throw new Error("Failed to fetch data")
    }

    return res.json()
}

在src/app/api/blog/route.tsx 中：

import { connectToDb } from "@/lib/utils"
import { Post } from "@/lib/models"
import { NextResponse } from "next/server"

export const GET = async (request) => {
    try{
        connectToDb();
        const posts = await Post.find();
        return NextResponse.json(posts);
    }catch(err){
        console.log(err);
        throw new Error("Failed to fetch posts!");
    }
}

但是在 localhost:3000/blog 页面中，显示 Error：Failed to fetch data
Server console 中出现的报错信息是：

⨯ TypeError: fetch failed
at async getData (./src/app/blog/page.tsx:20:17)
at async BlogPage (./src/app/blog/page.tsx:33:19) Cause: [Error: 704F0000:error:0A00010B:SSL routines:ssl3_get_record:wrong version
number:c:\ws\deps\openssl\openssl\ssl\record\ssl3_record.c:355: ] {
library: ‘SSL routines’, reason: ‘wrong version number’, code:
‘ERR_SSL_WRONG_VERSION_NUMBER’ } ⨯ TypeError: fetch failed
at async getData (./src/app/blog/page.tsx:20:17)
at async BlogPage (./src/app/blog/page.tsx:33:19) digest: “119694264”

一番尝试后，发现问题出在：如果你正在本地开发环境下工作，并且没有为localhost设置有效的SSL证书，可以尝试使用HTTP协议代替HTTPS。

应该将 src/app/blog/page.tsx 中的代码修改为如下：

const res = await fetch(`http://localhost:3000/api/blog/${slug}`, {next:{revalidate:3600}}) //data fetch

即可解决该问题。