无法使用 Fetch API 获取 JSON，但可以使用 JQuery

Question

我正在将一个 React 项目集成到 Grails/Angular 系统中，并且我正在尝试使用来自 React 的 Fetch API 查询 Grails。

应用程序运行并打开 Chrome 开发人员工具控制台后，以下内容按预期工作：

$.get('/project/controller/get', function(data, status) {
  console.log(data); 
});

它显示一堆 JSON，如下所示：

以下不按预期工作：

fetch('/project/controller/get', {
    credentials: 'include',
    headers: {
        'Content-Type': 'application/json'
    }
})
.then(response => response.json())
.then(response => console.log(response))
.catch(error => console.log(error))

它给出了一个语法错误，因为它试图将 HTML 文档解析为 JSON。

在开发者工具网络选项卡中，我看到当我发出 JQuery 请求时，只有一个 GET 请求，而服务器响应是我想要的 JSON。

当我使用 Fetch API 发出请求时，会出现两个请求：

• 一个到 /project/controller/get，它只响应状态码 302，没有 JSON
• 另一个 to /project 响应状态代码 200，以及应用程序首页的 HTML。 这是 Fetch API 接收并尝试解析为 JSON 的内容。

在执行渲染为 JSON 语句之前，我可以验证 Grails 控制器方法是否按预期生成数据。

使用 Axios 也会发生同样的事情。

JQuery 请求详情：

一般的

请求地址： http://localhost:8080/project/controller/get

请求方式：GET

状态码：200 OK

远程地址:[::1]:8080

推荐人政策：降级时不推荐人

响应头

HTTP/1.1 200 正常

服务器：Apache-Coyote/1.1

内容类型：文本/html；字符集=utf-8

传输编码：分块

日期：2017 年 10 月 6 日星期五 02:41:59 GMT

请求头

获取/项目/控制器/获取 HTTP/1.1

主机：本地主机：8080

连接：保持连接

接受： /

X-Requested-With: XMLHttpRequest

用户代理：Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/61.0.3163.100 Safari/537.36

引用者： http://localhost:8080/project/settings/

接受编码：gzip、deflate、br

接受语言：en-GB,en;q=0.8,en-US;q=0.6,fr;q=0.4,ru;q=0.2

曲奇：JSESSIONID=52F86C47C43F558E05C2F6DB5E9E7CE2

有什么办法可以让它发挥作用吗？ 谢谢。

---

我刚刚注意到由于某种原因在浏览器中输入http://localhost:8080/project/controller/get 会自动将我重定向到http://localhost:8080/project 。 可能是服务器做了一些奇怪的事情，但奇怪的是 JQuery 请求有效......

Answer 1

它给出了一个语法错误，因为它试图将 HTML 文档解析为 JSON。

如果响应是 HTML 使用Response.text()

Answer 2

302 是重定向，因此您的提取请求被重定向到另一个页面，可能是登录页面（？）

我在您的 fetch 请求中看到您正在使用credentials:'include' ，也许这包括 Authorization 标头或类似的东西，并且您的控制器拒绝了该请求。

使用 chrome 开发者控制台，如果您在网络选项卡上标记“保留日志”，则可以检查请求