我如何从 api 端点获取数据

Question

I'm running nextjs for my front end (port 3000), trying to fetch api endpoints from strapi (port 1337). How do I go about using my frontend application in order to fetch data from my backend. Is there a way that both ports can run simultaneously, or am I doing something wrong?

If I run on port 3000 I receive a GET request error ERR_CONNETION_REFUSED, obviously - because the data on port 1337 isn't available because port 1337 isn't running.

My file structure for the project is the following:

my_app

--backend folder(strapi files and runs on on port 1337)

--frontend folder(contains all nextjs and runs on port 3000)

Code :

import Header from '../components/Header'
import useFetch from '../public/hooks/useFetch'

export default function Home() {

  const { loading, error, data } = useFetch('http://localhost:1337/reviews')

  return (
    
    <>

    <Header/>

    HOME


    </>
  )
}

Answer 1

To make your life easier, I do recommend you to install "Documentation" on the marketplace. After that, you will have access to "Documentation in plugins", there you will be able to check your API, and use "Retrieve your JWT token" to obtain a test token to test all your API.

From there you will have access to Swagger App, and you will be able to check all the API functionality.

Now, you can access all your API from the server URL ie: GET http://localhost:1337/helpers

Note: Be sure to make your APIs accessible to your roles on Settings/Roles on the Admin panel. From there, you can also check the URI you will be using.

In your case, to access http://localhost:1337/reviews be sure to make reviews accessible on the public or private side respectably.

After that, you will access your strapi endpoints from the strapi URL as //localhost:1337/your_endpoint