AJAX request not working

Hey there,

to start with, I'm trying to create a simple WEB APP using external API. The WEB APP will have three main functionalities: a) displaying movies b) displaying ratings of movies c) updating movie ratings (if user will change the rating).

For each of these functionalities I have created a separate request (using jQuery). Here is what API documentation provides me with:

a) displaying movies

instruction from API: curl -X GET -H "Content-Type: application/json" -H "Cache-Control: no-cache" 'https://movie-ranking.herokuapp.com/movies'

and here is my AJAX request which works perfectly fine:

var urlMovies = "https://movie-ranking.herokuapp.com/movies";

$.ajax(urlMovies, {
    type: "GET",
    dataType: "json",
    contentType: "application/json",
    cache: "no-cache",

    success: function(response) {
        console.log(response);
    },
    error: function() {
        console.log("request no. 1 have failed");
    }

});

b) displaying rating

instruction from API: curl -X GET -H "Content-Type: application/json" -H "Cache-Control: no-cache" 'https://movie-ranking.herokuapp.com/movies/1/ratings'

and here is my AJAX request which doesn't work (shows errors in console): (notice that I have added "?jsoncallback=?" at the end of the URL to enable JSONP)

var urlRatings = "https://movie-ranking.herokuapp.com/movies/1/ratings?jsoncallback=?";

$.ajax(urlRatings, {
    type: "GET",
    dataType: "json",
    data: {
        "id": 1
    },
    contentType: "application/json",
    cache: "no-cache",
    success: function(response) {
        console.log(response);
    },
    error: function() {
        console.log("request no. 2 have failed");
    }

})

var urlUpdateRating = "https://movie-ranking.herokuapp.com/movies/1/ratings?jsoncallback=?";

c) updating movie ratings (if user will change the rating).

instruction from API: curl -X POST -H "Content-Type: application/json" -H "Cache-Control: no-cache" -d '{ "rating": 2 }' 'https://movie-ranking.herokuapp.com/movies/1/ratings'

and here is my AJAX request which doesn't work (shows errors in console): (notice that I have added "?jsoncallback=?" at the end of the URL to enable JSONP)

var urlUpdateRating = "https://movie-ranking.herokuapp.com/movies/1/ratings?jsoncallback=?";

$.ajax(urlUpdateRating, {
    type: "POST",
    dataType: "json",
    data: {
        "id": 1,
        "movie_id": 1,
        "rating": 3
    },
    contentType: "application/json",
    cache: "no-cache",
    success: function(response) {
        console.log(response);
    },
    error: function() {
        console.log("request no. 3 have failed");
    }

});

At first I thought that there are some files missing on the server but now I'm thinking that I'm not seeing something (for example security limitations etc.).

Here is a link to my workspace is anyone would like to see live version (almost no HTML and no CSS, at first I want to make sure that all the requests works before coding the whole APP):

https://w.trhou.se/bf3swx9176

Any help would be appreciated!