JSON.parse empty response in Ember

Question

In my Ember project, I use the following code to get a JSON response from my back-end:

Ember.$.getJSON(
    mybackendurl.foo/mybarroute,
    function (data) {
        console.log(data);
});

And there, I get the following error message: SyntaxError: JSON.parse: unexpected end of data at line 1 column 1 of the JSON data.

My back-end is written in PHP using Symfony, and VoryxRESTGeneratorBundle to send JSON. When I visit http://mybackendurl.foo/mybarroute on my browser, I get a nice JSON response:

{
    "links": 
    [
    {
        "id": 28,
        [...]
    }
    ]
}

It looks like the answer is not correctly detected when using Ember. I'm unsure if the problem comes from back or front-end. How should I fix this?

Additional information:

1) This code in Ember generate a OPTION request, with an empty 200 response:

Ember.$.ajax({
    url: http://mybackendurl.foo/mybarroute,
    type: 'GET',
    contentType: 'application/json'
});

2) I had no more results using chrome

3) Request and response headers

@Nicorr, are you running your ember code under localhost:8000 too? — Shaunak, Aug 06 '15 at 16:02
ah Am updating my answer but look like you are running into classic cross domain problem :) — Shaunak, Aug 06 '15 at 16:04

score 1 · Answer 1 · edited May 23 '17 at 12:00

1

Update

Based on updated Request Response headers, I would guess you are running into Cross-domain problem. Your server runs on PORT 8000, and front-end runs on Port 4200

Either considering going to a JSONP solution or Enable CORS in your server.

Because browser does not support cross domain, you get an error, which ember thinks is a bad JSON.

Here's how you can return JSONP from symfony:

Returning JSONP from Symfony2 controller using AJAX call

Once your server supports a callback parameter in URL, and responds with a callback({your json})

Here's how to use jsonp from Ember:

How do I use the JSONP datatype with Ember Data?

edited May 23 '17 at 12:00

Community

1
1

answered Aug 06 '15 at 15:52

Shaunak

17,377
5
53
84

I think it means an unlisted chunk of key-value pairs. – Andrey Mikhaylov - lolmaus Aug 06 '15 at 15:53
Sorry it was unclear, it's indeed an unlisted chunk of key-value pairs. I just got the full JSON in an online validator to check, it's valid – Nicorr Aug 06 '15 at 15:56
cool.. can you POST the request response headers from your network monitor ? – Shaunak Aug 06 '15 at 15:58

Kit Sunde · Answer 2 · 2015-08-06T16:13:10.583

1

I don't think you've configured CORS on your server, your browser can't receive data from something with a different origin unless CORS is configured correctly.

If you do curl -IX OPTIONS http://whateverisyoururl it should at a minimum send something like this back in the headers:

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, OPTIONS

This isn't an ember.js issue, it's a general cross origin request issue.

edited Aug 06 '15 at 16:13

answered Aug 06 '15 at 16:04

Kit Sunde

35,972
25
125
179

I am not sure that this is the answer, because I'm already retrieving data from the back-end in other parts of the code. The only difference is that I'm using the default Ember system to do so (`this.store.filter('my-entity' [...]`) – Nicorr Aug 06 '15 at 16:09
@Nicorr Ember doesn't generate `OPTIONS` requests. It's the pre-flighted request generated by your browser on destructive CORS requests. If the OPTIONS request doesn't return with CORS headers it blocks the rest of the request. You can read more about it here: https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS – Kit Sunde Aug 06 '15 at 16:16
@Nicorr It's possible that your backend is returning CORS headers on `GET` but not on `OPTIONS` btw. You should check. – Kit Sunde Aug 06 '15 at 16:17

score 0 · Accepted Answer · answered Aug 12 '15 at 16:40

It turned out to be a configuration problem in nelmio_cors. The thing that got me speding hours is the caching: max_age was set to 3600, so I should have waited 1 hour to see the effect applied.

Setting it to 0 solved my problem.

nelmio_cors:
    defaults:
        allow_credentials: true
        allow_origin: ['*']
        allow_headers: ['Origin', 'X-Requested-With', 'Content-Type', 'Accept']
        allow_methods: ['GET', 'POST', 'PUT', 'OPTIONS', 'PATCH', 'DELETE']
        expose_headers: []
        max_age: 0
        hosts: []
        origin_regex: false
    paths:
        '^/api/':
            allow_origin: ['*']
            allow_headers: ['Origin', 'X-Requested-With', 'Content-Type', 'Accept']
            allow_methods: ['GET', 'POST', 'PUT', 'OPTIONS', 'PATCH', 'DELETE']
            max_age: 0

score -1 · Answer 4 · answered Aug 06 '15 at 15:51

-1

Try this..

Ember.$.ajax({
url: http://mybackendurl.foo/mybarroute,
type: 'GET',
contentType: 'application/json',
dataType: 'json',
success: function(result){
   console.log(result);
}});

and also does your url dont have extensions? i mean something like, mybarroute.php,.json,.js, or .html?

answered Aug 06 '15 at 15:51

Patrick Mark Garcia Mazo

39
6

Its pretty clear form the error that th response is already detected as JSON – Shaunak Aug 06 '15 at 15:56
The proposed code does not work. My URL does not have extensions (I'm using Symfony). It's literally: `http://localhost:8000/app_dev.php/call-to-action/next?_format=json&user=1&issue=1` – Nicorr Aug 06 '15 at 16:00

JSON.parse empty response in Ember

4 Answers4