json-server 返回 html 而不是 JSON

Question

I created a json-server on localhost:3001 but when I fetch that data it returns me HTML instead of JSON.

Here is my JSON data

{
  "articles": [
    {
      "id": "1",
      "title": "title1",
      "author": "Ben",
      "body": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi, ullam eos dignissimos aperiam rerum qui suscipit cum nobis, totam ea tenetur perferendis praesentium corporis possimus ducimus et minima voluptatum. Numquam mollitia culpa consectetur unde illum est aut dicta eligendi vero molestias impedit sint, maiores saepe voluptas necessitatibus excepturi ducimus repudiandae, non quidem nobis veritatis! Libero neque, cumque illo est corrupti eaque recusandae ipsum, ut debitis vitae molestias deleniti voluptates distinctio sapiente autem. Tempore aperiam minima sit atque, tempora doloribus blanditiis id ipsum. Distinctio quos nisi, totam sunt ex voluptatum? Neque alias laborum ipsum doloremque fuga earum in autem. Hic alias omnis facilis facere eum assumenda deleniti ad, maiores laudantium temporibus odio non, molestiae dolorum! Quo mollitia ex sapiente maiores excepturi?"
    },
    {
      "id": "2",
      "title": "title2",
      "author": "Joseph",
      "body": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi, ullam eos dignissimos aperiam rerum qui suscipit cum nobis, totam ea tenetur perferendis praesentium corporis possimus ducimus et minima voluptatum. Numquam mollitia culpa consectetur unde illum est aut dicta eligendi vero molestias impedit sint, maiores saepe voluptas necessitatibus excepturi ducimus repudiandae, non quidem nobis veritatis! Libero neque, cumque illo est corrupti eaque recusandae ipsum, ut debitis vitae molestias deleniti voluptates distinctio sapiente autem. Tempore aperiam minima sit atque, tempora doloribus blanditiis id ipsum. Distinctio quos nisi, totam sunt ex voluptatum? Neque alias laborum ipsum doloremque fuga earum in autem. Hic alias omnis facilis facere eum assumenda deleniti ad, maiores laudantium temporibus odio non, molestiae dolorum! Quo mollitia ex sapiente maiores excepturi?"
    },
    {
      "id": "3",
      "title": "title3",
      "author": "Jeff",
      "body": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi, ullam eos dignissimos aperiam rerum qui suscipit cum nobis, totam ea tenetur perferendis praesentium corporis possimus ducimus et minima voluptatum. Numquam mollitia culpa consectetur unde illum est aut dicta eligendi vero molestias impedit sint, maiores saepe voluptas necessitatibus excepturi ducimus repudiandae, non quidem nobis veritatis! Libero neque, cumque illo est corrupti eaque recusandae ipsum, ut debitis vitae molestias deleniti voluptates distinctio sapiente autem. Tempore aperiam minima sit atque, tempora doloribus blanditiis id ipsum. Distinctio quos nisi, totam sunt ex voluptatum? Neque alias laborum ipsum doloremque fuga earum in autem. Hic alias omnis facilis facere eum assumenda deleniti ad, maiores laudantium temporibus odio non, molestiae dolorum! Quo mollitia ex sapiente maiores excepturi?"
    }
  ]
}

and here is my UseFetch hook:

import { useEffect, useState } from "react";
function UseFetch({urlParam}){
    
    const [data,setData] = useState([]);
    const [isDepending,setIsDepending] = useState(false);
    const [error, setError] = useState(null);
    const [url,setUrl] = useState(urlParam);
    useEffect(() => {
            async function fetchingData() {
            setIsDepending(true)
            
            try{
                const fetchingProcess = await fetch(url);
                if(!fetchingProcess.ok){
                    throw new Error('bad connection')
                }
                const jsonData = await fetchingProcess.json();
                console.log(jsonData);
                setIsDepending(false)
                setData(jsonData)
            }catch(e){
                setError('sorry request encountred a problem')
                setIsDepending(false)
            }
        }
        
        fetchingData();
        setUrl(urlParam);
    }, [url])
    return {data, isDepending, error};
}
export default UseFetch;

and after all, I get this to console while logging the error

Unexpected token < in JSON at position 0

reactApp and json-server are on 2 seprate ports.

Answer 1

I broke it down in a component with just the basic parts and the JSON works. Not sure why it doesn't work with your process but I suspect it's the way you were fetching the data...perhaps the fetchingProcess.json(); .

Maybe try this instead. It worked well for me using your JSON data as you can see from this screenshot below:

 import React, { useEffect, useState } from "react"; import axios from "axios"; function TestMe(props) { const [loading, setLoading] = useState(true); const [info, setInfo] = useState({}); useEffect(() => { (async function () { const response = await axios.get("/flat/test.json"); const jsonData = await response.data.articles; setInfo(jsonData); setLoading(false); console.log("data", jsonData); })(); }, []); return ( <> {loading? ( <div className="load"></div> ): ( <> <div className="article"> {info.map((item, index) => ( <div key={index} className="article-text"> <h1>{item.title}</h1> <h2>{item.author}</h2> <p>{item.body}</p> </div> ))} </div> </> )} </> ); } export default TestMe;