无法获取 "images" net::ERR_CONNECTION_REFUSED (Gitpod)

Question

在 Gitpod 上，我的 NextJS 前端 正在尝试获取包含 “产品名称”的对象列表、“价格” 和 “图片” 来自 my Django Rest API 后端。然后，我的 NextJS 前端 可以获得包含 "产品名称" 和 "价格"[=80= 的对象列表] 但不是 "images" 所以 我的 NextJS 前端 不能只得到 "images" ，如下所示：

(“产品名称”，例如“靴子 4”、“靴子 3”... 和 “价格”，例如“£12.10”， "£10.50" ... 显示但不显示 "图像")

这是我想要的输出 “产品名称”、“价格” 和 “图片”:

在 Gitpod 上，我的 NextJS 前端在端口 3000 上打开（私有） 和 我的 Django Rest API 端口 8000 上的后端打开（私有） 是 运行:

并且我的 NextJS 前端 使用此 Rest API 调用 "localhost" 如下所示来获取列表包含 “产品名称”、“价格” 和 “图片”:[=20= 的对象]

http://localhost:8000/api

而且，还有这些错误：

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

实际上，我通过使用此 Rest API 调用和 my Gitpod 域 解决了上面的这些错误，如下所示获取对象列表：

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

但出现如下错误：

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();

实际上，这个 Rest API 调用 我的 Gitpod 域 是正确的，因为通过这个 Rest API 调用，我可以得到对象列表Postman 来自 my Django Rest API backend on Gitpod:

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

是否有任何解决方案可以解决此错误并获取包含 "产品名称"、"价格" 和“图片”?

Answer 1

您应该为您的 Django Rest API 后端设置 端口 8000“public” 以获取包含 [=20= 的对象列表]"产品名称"、"价格" 和 "图片":

最后，您可以获得包含“产品名称”、“价格”和的对象列表“图片”: