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

我正在将React项目集成到Grails/Angular系统中，并尝试使用React的FetchAPI查询Grails

在应用程序运行且Chrome developer tools控制台打开的情况下，以下各项按预期工作：

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

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

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

以下操作未按预期工作：

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

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

在developer tools network选项卡中，我看到当我发出JQuery请求时，只有一个GET请求，服务器响应就是我想要的JSON

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

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

我可以验证Grails控制器方法在执行render as JSON语句之前是否按预期生成了数据

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

JQuery请求详细信息：

一般的

请求URL:

请求方法：获取

状态代码：200 OK

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

推荐人策略：降级时无推荐人

响应头

HTTP/1.1200ok

服务器：ApacheCoote/1.1

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

传输编码：分块

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

请求头

GET/project/controller/GET HTTP/1.1

主机：本地主机：8080

连接：保持活力

接受：/

X-request-With:XMLHttpRequest

用户代理：Mozilla/5.0（Windows NT 10.0；Win64；x64）AppleWebKit/537.36（KHTML，类似Gecko）Chrome/61.0.3163.100 Safari/537.36

推荐人：

接受编码：gzip，deflate，br

接受语言：en-GB，en；q=0.8，在美国；q=0.6，fr；q=0.4，ru；q=0.2

Cookie:JSESSIONID=52F86C47C43F558E05C2F6DB5E9E7CE2

有什么办法可以让它工作吗？谢谢

---

我刚刚注意到，出于某种原因，进入浏览器会自动将我重定向到。可能是服务器做了一些奇怪的事情，但奇怪的是JQuery请求工作正常

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

---

如果响应是HTML，请使用

response.text（）

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

我在您的获取请求中看到您正在使用

凭据：'include'

，可能这包括授权标头或类似的内容，并且您的控制器拒绝了该请求

---

使用chrome Developer console，如果在网络选项卡上标记“保留日志”，则可以检查请求。

内容类型

标头用于指定请求正文的数据类型。因为您正在发出get请求，所以不需要它。尝试删除它。“它给出了一个语法错误，因为它试图将HTML文档解析为JSON。”您可以创建一个JSFIDLE或plnkr来演示吗？请参阅代码是否用于为Ajax请求设置默认值？无论如何，对于您的获取请求，您是否尝试过使用

头：{'Accept'：'application/json'}

或其他变体？（也就是说，为GET请求设置一个Accept头，而不是为其设置内容类型——正如前面的注释所述，这不会产生任何效果。）当您在浏览器devtools中查看请求时，jQuery

$.GET

调用正在发送，它发送的是什么Accept头？另外，jquery示例正在查询与fetch示例不同的url：将头更改为

头：{'Accept'：'application/json'}

不会影响它。它仍然返回HTML。是的，但问题是如何让它返回JSON，如果通过jQuery

$查询时相同的URL确实返回JSON。get（）

@nnnn“如果通过jQuery

$查询时相同的URL确实返回JSON。get（）

”我们如何确定

“应用程序/JSON”

是否提供了服务？如果响应是有效的

JSON

，OP为什么会提到HTML文档？问题明确地说，对同一URL的请求会产生不同的响应，这取决于它们是使用

$.get（）

还是

fetch（）

。他们还可以在console网络选项卡中看到不同的行为。这就是问题的关键所在。@nnnnnnnn不，这不是问题的关键所在。OP在问题文本中明确提到一个HTML

文档

。HTML文档如何与JSON相关？OP需要重现有效的

JSON

在

Response.JSON（）调用时抛出错误。啊，是的。微妙但重要。