2

I need to decouple front-end and back-end. I am using Rails for back-end and Backbone for front-end.

After a couple days of trial and error I was able to setup CORS on the server. All thanks to this module:

https://github.com/yaoweibin/nginx_cross_origin_module

Now I found out that Backbone does not support cross-domain calls out of the box.

I wonder what is the best way to decouple Backbone from back-end?

I see two solutions:

1) Write paths in Backbone models / collections that will point to the server, so I will get for example:

class App.Collections.Plots extends Backbone.Collection
   model: App.Models.Plot
   url: 'http://www.app.com/api/plots'

This will mean that I will have to also patch Backbone methods to support cross-domain.

2) Setup the rails-side of front-end part in such a way, that Rails, not Backone will be making cross-domain calls to the server.. This seems strange, because Backbone was supposed to make decoupling easier and now I will be kind of falling back to rails solutions.

Stpn
  • 6,202
  • 7
  • 47
  • 94

1 Answers1

2

Now I found out that Backbone does not support cross-domain calls out of the box.

Backbone.js "support" cross-domain calls. In fact, it's not specific to backbone.js, it's the role of the browser to support it. In a CORS compatible browser, each request (POST, GET) is preceded by an OPTIONS request to check if the server authorize the corresponding POST or GET request.

So you just need to respond to this new call in your rails application. For instance :

class ApplicationController < ActionController::Base
  before_filter :cors_preflight_check
  after_filter :cors_set_access_control_headers

  # For all responses in this controller, return the CORS access control headers.
  def cors_set_access_control_headers
    headers['Access-Control-Allow-Origin'] = '*'
    headers['Access-Control-Allow-Methods'] = 'POST, GET, OPTIONS'
    headers['Access-Control-Max-Age'] = "1728000"
  end

  # If this is a preflight OPTIONS request, then short-circuit the
  # request, return only the necessary headers and return an empty
  # text/plain.
  def cors_preflight_check
    if request.method == :options
      headers['Access-Control-Allow-Origin'] = '*'
      headers['Access-Control-Allow-Methods'] = 'POST, GET, OPTIONS'
      headers['Access-Control-Allow-Headers'] = 'X-Requested-With, X-Prototype-Version'
      headers['Access-Control-Max-Age'] = '1728000'
      render :text => '', :content_type => 'text/plain'
    end
  end

end

Code from this great post : http://www.tsheffler.com/blog/?p=428

So if your Nginx plugin works fine you should be ok. Just check that your Access-Control-Allow-Origin header includes the domain where your javascript is executed.

Tricote
  • 1,508
  • 1
  • 13
  • 21