[英]Unable to get JSON using Fetch API, but can using JQuery
I'm integrating a React project into a Grails/Angular system, and I'm trying to query Grails using the Fetch API from React.我正在将一个 React 项目集成到 Grails/Angular 系统中,并且我正在尝试使用来自 React 的 Fetch API 查询 Grails。
With the application running and the Chrome developer tools console open, the following works as expected:应用程序运行并打开 Chrome 开发人员工具控制台后,以下内容按预期工作:
$.get('/project/controller/get', function(data, status) {
console.log(data);
});
It displays a bunch of JSON, like so:它显示一堆 JSON,如下所示:
The following does not work as expected:以下不按预期工作:
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))
It gives a syntax error because it is trying to parse an HTML document as JSON.它给出了一个语法错误,因为它试图将 HTML 文档解析为 JSON。
In the developer tools network tab, I see that when I make the JQuery request, there is only a single GET request, and the server response is the JSON I desire.在开发者工具网络选项卡中,我看到当我发出 JQuery 请求时,只有一个 GET 请求,而服务器响应是我想要的 JSON。
When I make the request using the Fetch API, two requests appear:当我使用 Fetch API 发出请求时,会出现两个请求:
I can verify that the Grails controller method generates the data as expected before the render as JSON statement is executed.在执行渲染为 JSON 语句之前,我可以验证 Grails 控制器方法是否按预期生成数据。
Same thing happens using Axios.使用 Axios 也会发生同样的事情。
JQuery request details: JQuery 请求详情:
General一般的
Request URL: http://localhost:8080/project/controller/get请求地址: http://localhost:8080/project/controller/get
Request Method:GET请求方式:GET
Status Code:200 OK状态码:200 OK
Remote Address:[::1]:8080远程地址:[::1]:8080
Referrer Policy:no-referrer-when-downgrade推荐人政策:降级时不推荐人
Response headers响应头
HTTP/1.1 200 OK HTTP/1.1 200 正常
Server: Apache-Coyote/1.1服务器:Apache-Coyote/1.1
Content-Type: text/html;charset=utf-8内容类型:文本/html;字符集=utf-8
Transfer-Encoding: chunked传输编码:分块
Date: Fri, 06 Oct 2017 02:41:59 GMT日期:2017 年 10 月 6 日星期五 02:41:59 GMT
Request headers请求头
GET /project/controller/get HTTP/1.1获取/项目/控制器/获取 HTTP/1.1
Host: localhost:8080主机:本地主机:8080
Connection: keep-alive连接:保持连接
Accept: /接受: /
X-Requested-With: XMLHttpRequest X-Requested-With: XMLHttpRequest
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/61.0.3163.100 Safari/537.36用户代理:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/61.0.3163.100 Safari/537.36
Referer: http://localhost:8080/project/settings/引用者: http://localhost:8080/project/settings/
Accept-Encoding: gzip, deflate, br接受编码:gzip、deflate、br
Accept-Language: en-GB,en;q=0.8,en-US;q=0.6,fr;q=0.4,ru;q=0.2接受语言:en-GB,en;q=0.8,en-US;q=0.6,fr;q=0.4,ru;q=0.2
Cookie: JSESSIONID=52F86C47C43F558E05C2F6DB5E9E7CE2曲奇:JSESSIONID=52F86C47C43F558E05C2F6DB5E9E7CE2
Is there any way I can get this to work?有什么办法可以让它发挥作用吗? Thanks.谢谢。
I just noticed entering http://localhost:8080/project/controller/get in the browser automatically redirects me to http://localhost:8080/project for some reason.我刚刚注意到由于某种原因在浏览器中输入http://localhost:8080/project/controller/get 会自动将我重定向到http://localhost:8080/project 。 Might be the server doing something weird, but it's strange that the JQuery request works...可能是服务器做了一些奇怪的事情,但奇怪的是 JQuery 请求有效......
It gives a syntax error because it is trying to parse an HTML document as JSON.它给出了一个语法错误,因为它试图将 HTML 文档解析为 JSON。
If the response is HTML use Response.text()
如果响应是 HTML 使用Response.text()
302 is a redirect so your fetch request is redirect to another page, maybe a login page (?) 302 是重定向,因此您的提取请求被重定向到另一个页面,可能是登录页面(?)
I see in your fetch request you are using credentials:'include'
and maybe this are including a Authorization header or something similar and your controller are rejecting the request.我在您的 fetch 请求中看到您正在使用credentials:'include'
,也许这包括 Authorization 标头或类似的东西,并且您的控制器拒绝了该请求。
With chrome developper console you can inspect the request if you mark "preserve log" at network tab使用 chrome 开发者控制台,如果您在网络选项卡上标记“保留日志”,则可以检查请求
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.