无法获取“图像”.net::ERR_CONNECTION_REFUSED (Gitpod)

Question

On Gitpod , my NextJS frontend is trying to fetch the list of objects which contain "product names" , "prices" and "images" from my Django Rest API backend . Then, my NextJS frontend can get the list of objects which contain "product names" and "prices" but not "images" so my NextJS frontend cannot get only "images" as shown below:

( "product names" such as "boots 4", "boots 3"... and "prices" such as "£12.10", "£10.50"... are displayed but not "images" )

This is my desired output with "product names" , "prices" and "images" :

On Gitpod , both my NextJS frontend on port 3000 open (private) and my Django Rest API backend on port 8000 open (private) are running:

And my NextJS frontend uses this Rest API call with "localhost" as shown below to get the list of objects which contain "product names" , "prices" and "images" :

http://localhost:8000/api

And, there are these errors:

3000-gitpodio-templatetypescr-tqzkjl97w1d.ws-us33.gitpod.io/:987
GET http://localhost:8000/media/images/paid.png.net::ERR_CONNECTION_REFUSED 3000-gitpodio-templatetypescr-tqzkjl97w1d.ws-us33.gitpod.io/:987
GET http://localhost:8000/media/images/size.png.net::ERR_CONNECTION_REFUSED 3000-gitpodio-templatetypescr-tqzkjl97w1d.ws-us33.gitpod.io/:987
GET http://localhost:8000/media/images/download.jpg.net::ERR_CONNECTION_REFUSED 3000-gitpodio-templatetypescr-tqzkjl97w1d.ws-us33.gitpod.io/:987
GET http://localhost:8000/media/images/02173_l.jpg.net::ERR_CONNECTION_REFUSED

Actually, I solved these errors above by using this Rest API call with my Gitpod domain as shown below to get the list of objects:

https://8000-gitpodio-templatetypescr-tqzkjl97w1d.ws-us33.gitpod.io/api

But other error occurs as shown below:

Server Error
FetchError: invalid json response body at https://8000-gitpodio-templatetypescr-tqzkjl97w1d.ws-us33.gitpod.io/api reason: Unexpected end of JSON input

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Source
pages/index.js (73:16) @ async getStaticProps

  71 | export async function getStaticProps() {
  72 |   const res = await fetch("https://8000-gitpodio-templatetypescr-tqzkjl97w1d.ws-us33.gitpod.io/api");
> 73 |   const posts = await res.json();
     |                ^
  74 | 
  75 |   // const ress = await fetch("http://127.0.0.1:8000/api/category/");
  76 |   // const categories = await ress.json();

Actually, this Rest API call with my Gitpod domain is correct because with this Rest API call, I can get the list of objects on Postman from my Django Rest API backend on Gitpod :

https://8000-gitpodio-templatetypescr-tqzkjl97w1d.ws-us33.gitpod.io/api

Are there any solutions to solve this error and get the list of objects which contain "product names" , "prices" and "images" ?

Answer 1

You should make the port 8000 for your Django Rest API backend "public" to get the list of objects which contain "product names" , "prices" and "images" :

Finally, you can get the list of objects which contain "product names" , "prices" and "images" :