JavaScript - ne peut pas demander au ballon-restful API avec backbone.js - Stack Overflow

I just started learning backbone.js, and I'm trying to convert our web-client to backbone app. However I can't send a simple request to API. Our web service is written with python, flask-restful. The app only makes an OPTIONS request to the API. (it should make a get request)

I do think it's not the problem with backbone itself but with the server. Because when i change the url to https://api.github.com and change the endpoint to /gists/1 it works like a charm. I've read several stackoverflow questions about the similar issue. I thought it was CORS issue as suggested by the stackoverflow users and i do only see preflighted request on my console.

However, I've already set Access-Control-Allow-Origin to * on my server. Moreover, It doesn't even work when I run the server on localhost, and make the request from localhost. (the ports are different, but I'm not sure if it is called cross-site when the ports are different)

I can nicely make jquery ajax requests to my server. It just don't work with backbone.

Here is the backbone app so far,

$.ajaxPrefilter( function( options, originalOptions, jqXHR ) {
    options.url = 'http://localhost:5000' + options.url;
});

var Complaints = Backbone.Collection.extend({
    url: '/complaint/recent'
});

var ComplaintList = Backbone.View.extend({
    el: ".content",
    render: function() {
        var that = this;
        var complaints = new Complaints();
        complaints.fetch({
            success: function(res) {
                console.log(res);
            }
        });
        // console.log("hede2");
        // return this.$el.html("hede2");
    }
});

cList = new ComplaintList();

// routers
var Router = Backbone.Router.extend({
    routes: {
        "": "home"
    }
});

var router = new Router();
router.on("route:home", function() {
    cList.render();
});

Backbone.history.start();

and this is the endpoint from the flask-restful.

class ComplaintRecent(restful.Resource):
    def get(self):
        category = request.args.get('category', '')
        sinceid = request.args.get('sinceid', '')
        slug_city = request.args.get('slugcity', '')
        return ccomp.get_recent_complaints(category, sinceid, slug_city)

maybe server responses could help someone to identify if there is any issue.

 00:28 ~ $ curl -I -X OPTIONS http://api.enforceapp.com/complaint/recent
HTTP/1.1 200 OK
Server: nginx/1.2.1
Date: Thu, 30 Jan 2014 22:31:51 GMT
Content-Type: text/html; charset=utf-8
Content-Length: 0
Connection: keep-alive
Allow: HEAD, GET, OPTIONS
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE
Access-Control-Allow-Credentials: true

I'm lost in the first-day of learning backbone, I've asked the same question on freenode but couldn't get an answer.

If you have something to direct me to the possible issues, I'd be really glad.

I just started learning backbone.js, and I'm trying to convert our web-client to backbone app. However I can't send a simple request to API. Our web service is written with python, flask-restful. The app only makes an OPTIONS request to the API. (it should make a get request)

I do think it's not the problem with backbone itself but with the server. Because when i change the url to https://api.github.com and change the endpoint to /gists/1 it works like a charm. I've read several stackoverflow questions about the similar issue. I thought it was CORS issue as suggested by the stackoverflow users and i do only see preflighted request on my console.

However, I've already set Access-Control-Allow-Origin to * on my server. Moreover, It doesn't even work when I run the server on localhost, and make the request from localhost. (the ports are different, but I'm not sure if it is called cross-site when the ports are different)

I can nicely make jquery ajax requests to my server. It just don't work with backbone.

Here is the backbone app so far,

$.ajaxPrefilter( function( options, originalOptions, jqXHR ) {
    options.url = 'http://localhost:5000' + options.url;
});

var Complaints = Backbone.Collection.extend({
    url: '/complaint/recent'
});

var ComplaintList = Backbone.View.extend({
    el: ".content",
    render: function() {
        var that = this;
        var complaints = new Complaints();
        complaints.fetch({
            success: function(res) {
                console.log(res);
            }
        });
        // console.log("hede2");
        // return this.$el.html("hede2");
    }
});

cList = new ComplaintList();

// routers
var Router = Backbone.Router.extend({
    routes: {
        "": "home"
    }
});

var router = new Router();
router.on("route:home", function() {
    cList.render();
});

Backbone.history.start();

and this is the endpoint from the flask-restful.

class ComplaintRecent(restful.Resource):
    def get(self):
        category = request.args.get('category', '')
        sinceid = request.args.get('sinceid', '')
        slug_city = request.args.get('slugcity', '')
        return ccomp.get_recent_complaints(category, sinceid, slug_city)

maybe server responses could help someone to identify if there is any issue.

 00:28 ~ $ curl -I -X OPTIONS http://api.enforceapp.com/complaint/recent
HTTP/1.1 200 OK
Server: nginx/1.2.1
Date: Thu, 30 Jan 2014 22:31:51 GMT
Content-Type: text/html; charset=utf-8
Content-Length: 0
Connection: keep-alive
Allow: HEAD, GET, OPTIONS
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE
Access-Control-Allow-Credentials: true

I'm lost in the first-day of learning backbone, I've asked the same question on freenode but couldn't get an answer.

If you have something to direct me to the possible issues, I'd be really glad.

Source