enter image description here

I deployed my project from react js project to netlify, and it failed to fetch Data from the API, please what can i do now?

import React, { useState, useEffect } from "react";
import Bloglist from "./Bloglist";
import useFetch from './useFetch';
const Home = () => {
  const {data: blogs, isPending ,error} = useFetch(' https://localhost:8000/blogs');
   

    return (  
        <div className="home">
        {error && <div>{error}</div> }
        { isPending && <div>Loading...</div> }
        {blogs && <Bloglist blogs={blogs} title="All write-ups !!!" />}
        </div>
    ); 
}
 
export default Home;

i have tried changing the localhost address from ' http://localhost:8000/blogs' to ' https://localhost:8000/blogs', but is still not working.

CodePudding user response：

1. Make sure the API endpoint is correct: Double-check that the API endpoint you are using in your code is correct and still active. You can try accessing the API endpoint in a web browser to see if it is working correctly.

2. Check the Netlify logs: Netlify provides detailed logs for your deployments that can help you identify any issues that may have occurred. You can access the logs by going to the "Deploys" tab for your site in the Netlify dashboard.

3. Check the API's CORS settings: If the API you are trying to access has CORS (Cross-Origin Resource Sharing) enabled, you may need to update your project's CORS settings to allow your site to fetch data from the API. You can do this by adding the appropriate headers to your API response.

4. Check your project's network requests: If your project is making network requests using fetch() or a similar API, make sure that the requests are being made with the correct method (e.g. GET, POST, etc.), and that any required data is being sent in the correct format.

I hope these suggestions help! If you continue to have issues, please provide more details about your project and the API you are trying to access, and I will do my best to assist you further.