Javascript fetch() 没有从本地主机返回预期的 json

Question

我有一个提供 JSON 数据的 Django 后端。当我运行curl 127.0.0.1:8000/posts/ 时，我得到：

[
{
"title": "This is a title",
"body": "Body :)",
"pub_date":"2020-11-25T13:36:57Z"
},
...
]

但是，当我运行这个 js 代码时

const API = '127.0.0.1:8000/posts/'
fetch(API).then(response => console.log(response))

我明白了：

Response { 
type: "basic", 
url: "http://localhost:3000/127.0.0.1:8000/posts/", 
redirected: false, 
status: 200, 
ok: true, 
statusText: "OK",
 headers: Headers, 
body: ReadableStream, 
bodyUsed: false
}

这是意料之外的。如果我然后尝试运行 .then(response => response.json()) 我得到

Uncaught (in promise) SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data

当我跑步时

fetch(API).then(response => console.log(response.headers))
fetch(API).then(response => console.log(response.text()))

我明白了

Headers {  }

Promise { "pending "}
   <state>: "pending"

分别

此外，

fetch(API).then(response => console.log(response.text()))
fetch(API).then(response => response.json()).then(data => console.log(data))

只发回去

Uncaught (in promise) SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data

错误

更新：

我还在 Django 服务器日志上注意到，当我刷新 javascript 页面时，没有出现新的请求。但是，当我运行 curl 时，会有一个 GET 请求。

Answer 1

您需要将响应更新为如下所示的 json：

const API = '127.0.0.1:8000/posts/';
fetch(API)
    .then(response => response.json())
    .then(response => console.log(response));

Answer 2

我认为你应该使用JSON.parse(response)；

或

fetch(myRequest)
  .then(response => response.json())
  .then(data => {console.log( data })

Answer 3

如果后端有任何错误日志，你可以先检查，因为如果你在不同的端口上运行前端和后端，所以，首先检查是否有任何错误。你可能有 CORS 错误。

然后你可以尝试获取数据

const API = '127.0.0.1:8000/posts/';
fetch(API)
    .then(response => response.json())
    .then(response => console.log(response));