Unable to get JSON using Fetch API, but can using JQuery

Question

I'm integrating a React project into a Grails/Angular system, and I'm trying to query Grails using the Fetch API from React.

With the application running and the Chrome developer tools console open, the following works as expected:

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

It displays a bunch of JSON, like so:

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.

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.

When I make the request using the Fetch API, two requests appear:

• One to /project/controller/get, which just responds with status code 302, and no JSON
• Another to /project which responds with status code 200, and the HTML for the front page of the application. This is what the Fetch API receives and tries to parse as JSON.

I can verify that the Grails controller method generates the data as expected before the render as JSON statement is executed.

Same thing happens using Axios.

JQuery request details:

General

Request URL: http://localhost:8080/project/controller/get

Request Method:GET

Status Code:200 OK

Remote Address:[::1]:8080

Referrer Policy:no-referrer-when-downgrade

Response headers

HTTP/1.1 200 OK

Server: Apache-Coyote/1.1

Content-Type: text/html;charset=utf-8

Transfer-Encoding: chunked

Date: Fri, 06 Oct 2017 02:41:59 GMT

Request headers

GET /project/controller/get HTTP/1.1

Host: localhost:8080

Connection: keep-alive

Accept: /

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

Referer: http://localhost:8080/project/settings/

Accept-Encoding: gzip, deflate, br

Accept-Language: en-GB,en;q=0.8,en-US;q=0.6,fr;q=0.4,ru;q=0.2

Cookie: 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. Might be the server doing something weird, but it's strange that the JQuery request works...

Answer 1

It gives a syntax error because it is trying to parse an HTML document as JSON.

If the response is HTML use Response.text()

Answer 2

302 is a redirect so your fetch request is redirect to another page, maybe a login page (?)

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.

With chrome developper console you can inspect the request if you mark "preserve log" at network tab