ServerError: Invalid JSON 响应正文...在 NextJS 应用程序中提取

Question

I have a nextJS app running locally, I also have a flask api running locally. I know the flask is returning proper json through Postman. The results from the get request to that are below:

{
    "results": [
        [
            {
                "date_posted": "Mon, 17 Jan 2022 00:00:00 GMT",
                "description": "This is a description",
                "id": 1,
                "mainImg": "https://i.ibb.co/pwxkyGw/How-the-Web-Works-1.png",
                "slug": "Test-Post",
                "subtitle": "Test Subtitle",
                "tags": "test tag",
                "title": "Test Post 2"
            }
        ]
    ]
}

So, now that I knew that was correct I started looking into the javascript:

import React from 'react';

export const getStaticPaths = async () => {
    const res = await fetch('http://localhost:3000/search/all')
    const data = await res.json()

    const paths = data.results[0].map(post => {
        return {
            params: { id: post.id.toString() }
        }
    })

    return {
        paths,
        fallback: false
    }
}

export const getStaticProps = async (context) => {
    const id = context.params.id
    const res = await fetch('http://localhost:5000/search/postID/' + id)
    const data = await res.json()

    return {
        props: {data}
    }
}

export default function Post({data}) {
  return (
  <div>
      {props.data}
  </div>
    )
}

I checked everything, and for some reason I still get this error:

Server Error
Error: invalid json response body at http://localhost:3000/search/all reason: Unexpected token < in JSON at position 0

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Source
pages\post\[pid].js (5:17) @ async getStaticPaths

  3 | export const getStaticPaths = async () => {
  4 |     const res = await fetch('http://localhost:3000/search/all')
> 5 |     const data = await res.json()
    |                 ^
  6 | 
  7 |     const paths = data.results[0].map(post => {
  8 |         return {
Show collapsed frames

I understand I am missing something, which is why I am here. If anyone has seen this and knows a fix please let me know!

Answer 1

So... if you look at the code for both fetches. One says port 3000 and the other says 5000... They are both supposed to be 5000. I can not believe it took me this long to catch that smdh.