Ajax Jquery call not working

Question

i'm trying to make a simple ajax request to the following URL. https://insightsoftwaresolutions.atlassian.net/rest/api/2/issue/createmeta?projectKeys=TES&issuetypeNames=Bug&expand=projects.issuetypes.fields

It receives the JSON response when i just put the URL on browser navigation bar and press enter but it's not working when i try to make a jquery ajax call. It's not having any console errors.

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>

    <script>
        $(document).ready(function () {

            $.ajax({
                cache: false,
                type: 'GET',
                crossDomain: true,
                url: 'https://insightsoftwaresolutions.atlassian.net/rest/api/2/issue/createmeta?projectKeys=TES&issuetypeNames=Bug&expand=projects.issuetypes.fields',
                contentType: 'application/json; charset=utf-8',
                dataType: 'jsonp',

                success: function (data) {
                    alert("success");
                },
                    error: function (jqXHR, textStatus) {
                        //displayCallResults(jqXHR);
                        alert("error");
                    }
            });

        });
    </script>  

UPDATE:

I changed the datatype:'jsonp' to datatype:'json'. Then i get the following error.

Origin http://localhost:3029 is not allowed by Access-Control-Allow-Origin.

Answer 1

Your Server does not support JSONP . Either change that

OR

Add headers at nginx to support CORS on the server side. OR you can add the CORS header on server side.

header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Headers: *");

Once you do that you can access your code using simple

$.getJSON(url).done(function(response) {
    console.log(response); //here's your response
});