Cross domain error on Backbone.js

Question

I'm newbie in Backbone and am not able to get the following working. This is in Backbonejs. I am trying to call a REST API and submit a form.

Here is the code for the page:

<!doctype html>
<html lang="en">
    <head>
        <title>Test App</title>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <script type="text/javascript" src="http://underscorejs.org/underscore-min.js"></script>
        <!--  Underscore.JS is the dependency library for Backbone.JS-->
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
        <!-- Jquery is used for DOM manipulation-->
        <script type="text/javascript" src="http://backbonejs.org/backbone-min.js"></script>
    </head>
    <body>
        <!--Fieldset helps logically grouping the HTML elements  -->
        <fieldset>
            <legend>Post data to Test</legend>
            <!-- Input Field to Enter the data to be sent to the server
                    Backbone.JS code is written to send POST request to the server
                    on clicking the button -->
            <input type="text" id="upload_link" placeholder="Enter the Link" required />
            <input type="button" id="post_data" value="Send data to the Server" />
        </fieldset>
        <fieldset>
            <legend>Get Data From Test</legend>
            <input type="button" id="get_data" value="Get Data From Server">
            <!--Backbone.JS code is written to send GET request to the server on clicking the button -->
        </fieldset>
        <div id="data"></div>
        <!-- Div element where data from the server is placed-->
    </body>
    <!-- Backbone.JS code starts here -->
    <script>
        $(document).ready(function () {
            Files = Backbone.Collection.extend({
                urlRoot: 'https://lite.test.com/api/file',
                url: function () {
                    return this.urlRoot;
                }
            });
            $('#post_data').click(function () {
                console.log('Post Clicked');
                post_data_to_the_server();
            });
            function post_data_to_the_server() {
                var file = new Files();
                file.fetch({data: {
                        apiKey: 'X93S2ssnwnue1T2y1ssnwGZMLHRiRGpPsQ',
                        email: 'abc@email.com',
                        fileLink: $('#upload_link').val(),
                        firstName: 'Swapnil',
                        lastName: 'Test',
                    },
                    type: 'POST',
                    async: false,
                });
                $('#upload_link').val('');
            }
        }
        );
    </script>
</html>

I'm getting the error - Access-Control-Allow-Origin. Can you please help?

I tried using various methods but still not able to solve the error. I think this is because we're posting from localhost to another server. Can you help please?

you are calling ajax request but calling from different server with json data, so you can solve it with send jsonp data. — Sumit Jha, Dec 10 '14 at 16:56
But jsonp converts to GET whereas I want it in POST. Is there a way I can do POST using jsonp or other method? — dang, Dec 10 '14 at 17:52

Cross domain error on Backbone.js

0 Answers0