Error on getting data from external API

Question

I have a HTML page with Google ADWords in it, and an ajax call from an external URL, and I want to get the json data from the url. The external API is also made by me. The API Controller (in Laravel 5.2):

public function index()
{
    $data = WeatherData::orderBy('created_at', 'DESC')->first();

    return Response::json($data);
}

HTML ADWords Code:

$.ajax({
        url: 'https://weather.mnsc.com/api/v1/data',
        type: 'POST',
        dataType: 'JSON',
        cors: true,
        success: function (data) {
            console.log(data);
        }
    });

But I get an error in Chrome:

XMLHttpRequest cannot load https://weather.mnsc.com/api/v1/data. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. The response had HTTP status code 500.

Is there a header I need to set in Laravel API?

Nick Bull · Answer 1 · 2016-08-11T14:50:00.207

1

You need a crossDomain: true property for the AJAX request, instead of a normal one. Also, $.ajax() doesn't have a cors option, so I've removed that. See jQuery.ajax() settings on the documentation page for all available options:

$.ajax({
    url: 'https://weather.mnsc.com/api/v1/data',
    type: 'POST',
    dataType: 'JSON',
    crossDomain: true,
    success: function (data) {
        console.log(data);
    }
});

edited Aug 11 '16 at 14:50

answered Aug 11 '16 at 14:48

Nick Bull

9,518
6
36
58

Doesn't he also have to set $.support.cors = true; ? – spozun Aug 11 '16 at 14:49
@spozun I'm not sure of that, let me check. I'll update if so – Nick Bull Aug 11 '16 at 14:50
I've removed cors and add your line, still no fix the problem :( – EBuzila Aug 11 '16 at 14:51
@spozun "$.support.cors contains the result of a test that tests whether or not the current browser supports cors. changing it doesn't make the browser support cors." – Nick Bull Aug 11 '16 at 14:53
@NickBull yes but you can also set it :-) – spozun Aug 11 '16 at 14:54
@EBuzila Any error output that you can get? Add `error: function(e) { console.log(e); }` as an option to the `$.ajax()` method options. – Nick Bull Aug 11 '16 at 14:55
@EBuzila Really! That I never knew. I'll look into this, I've never had to do that. – Nick Bull Aug 11 '16 at 14:58
@Nick Thanks for your effort, i check the error, it return `Object {readyState: 0, responseText: "", status: 0, statusText: "error"}` in the console – EBuzila Aug 11 '16 at 15:00
@EBuzila Try this instead, actually: `error: function(xhr, status, error) { var err = JSON.parse(xhr.responseText); console.log(err); }` – Nick Bull Aug 11 '16 at 15:05
Ok now i'm getting this `VM1342:1 Uncaught SyntaxError: Unexpected end of JSON input`, plus the previous 'No-Access-Controll' error – EBuzila Aug 11 '16 at 15:11
That means your JSON request data is incorrectly formatted somehow - and that's as much as I could tell you. So the answer is that your issue lies in your request JSON formatting. Try `data: JSON.stringify(json),`, to parse the JSON and see if that fixes it up for you. Also check your JSON matches the API request for the server. – Nick Bull Aug 11 '16 at 15:17
Well if i check the response in a web browser, i get `{"id":1,"status":"800","temperature":"35","created_at":"2016-08-11 00:00:00","updated_at":null}`, which is actually the correct answer, and don't see any syntax errors in the `json` response. I'll check your solution – EBuzila Aug 11 '16 at 15:22
Hmm, after a little more research, it could be your JavaScript that's busted, missing a `}` probably. See this SO answer: http://stackoverflow.com/questions/3594923/chrome-uncaught-syntaxerror-unexpected-end-of-input – Nick Bull Aug 11 '16 at 15:23
I'll check that post, thanks a lot for all your efforts. Cheers! – EBuzila Aug 11 '16 at 15:28

score 0 · Answer 2 · answered Aug 11 '16 at 14:54

0

Put this line of code before your ajax call. I've had to always set this to get cross domain jquery ajax working.

$.support.cors = true;

answered Aug 11 '16 at 14:54

spozun

872
1
6
14

http://api.jquery.com/jquery.support/ - Actually, I think jQuery recommends against this. "Intended for internal use only". – Nick Bull Aug 11 '16 at 14:59

EBuzila · Accepted Answer · 2016-08-12T10:10:38.377

Well, I find what might be the problem. The problem is with request type. I switched from post to get in the ajax call, and now it seems to work as expected.

$.ajax({
  url: 'https://weather.mnsc.com/api/v1/data',
  type: 'GET',
  dataType: 'JSON',
  crossDomain: true,
  success: function (data) {
     console.log(data);
  }
});

But this doesn't help me, as Google AdWords require only post request...

I also suspect that this is an issue from the Laravel API, there must be something that have to be set in order to use post requests.

UPDATE:

as I've suspected, the problem in post requests is with Larvael's csrf token.. I made an workaround by commenting the line in Kernel.php.

Error on getting data from external API

3 Answers3