Question

I am testing a Rest server using Django Rest Framework. By following the tut from Django Rest website I successfully generated a proper API. But when I try to test with backbone.js to talk locally with that server, it seems fail to communicate together.

The server places at address: http://localhost:8080/users/
The client: http://localhost/client

This is the collection and the view in client

    var Users = Backbone.Collection.extend({
        url: 'http://localhost:8080/apis/',
    });

The network after parsing shows status: canceled and type: pending

I suspect the port different caused the error. Could any point me out the correct way ? Thanks

Answer 1

The browser does not allow you to make POST/PUT ajax requests from localhost(:80) to localhost:8080, because of the Same Origin Policy requirement. In order for the browser to consider two addressed as having same origin, they must have the same protocol (http/https), domain name (localhost) and port number.

You can configure the web server at localhost:80 to proxy requests to localhost:8080. Most web servers support this functionality with a simple configuration change. If you are for instance using apache, see documentation.

Sample Apache proxy config:

ProxyPass /api http://localhost:8080/
ProxyPassReverse /api http://localhost:8080/

After this, you can access an address at localhost:8080/users with localhost/api/users:

var Users = Backbone.Collection.extend({
    url: '/api/users',
});