Access-Control-Allow-Origin getJSON Rails

Question

I have some code that works fine in development.

ORIGINAL CODE

respond_to :json

def index
  @tags = current_user.tags
  respond_with(@tags.map{|tag| {:id => tag.id, :name => tag.name} })
end

with a route file of

get "tags/index"

and my jQuery file has a line like this

$.getJSON('http://localhost:3000/tags.json', function(data) {

However, when pushing it to production I get an error XmlHttpRequest error: Origin is not allowed by Access-Control-Allow-Origin. After doing some research

Here Here and Here

I changed my code to this

NEW CODE

def index
  @tags = current_user.tags
  respond_to do |format|
    if params[:callback]
      format.json { render :json => @tags.map{|tag| {:id => tag.id, :name => tag.name}   }.to_json , :callback => params[:callback]}
    else
      format.json { render :json => @tags.map{|tag| {:id => tag.id, :name => tag.name} }}
    end
  end
end

and

$.getJSON('http://localhost:3000/tags.json' + '&callback=?', function(data) {

with the same route.

What is going on here? I'm still getting the same error, why didn't the callback fix it?

all jQuery Code

  var items = [];
  var prepopulate = [];

  $(function () {
     var myVarsJSON = $("#my_vars_json").html(),
          myVars     = $.parseJSON(myVarsJSON);
        $.each(myVars, function(i, obj) {
          return prepopulate.push(obj.name);
          });

    $.getJSON('/tags.json' + '&callback=?', function(data) {
        $.each(data, function(i, obj) {
            return items.push(obj.name);
            });
     $("#article_tag_ids_edit").val(prepopulate).select2({
      width: "element",
      tags: items,
      tokenSeparators: [",", " "]
      });
    });
  });

  $.getJSON('/tags.json' + '&callback=?', function(data) {
        $.each(data, function(i, obj) {
            return items.push(obj.name);
            });

      $("#article_tag_ids").select2({
      width: "element",
      tags: items,
      tokenSeparators: [",", " "]
    });
  });

Sachin Singh · Accepted Answer · 2013-08-18T17:59:03.560

2

try this out

instead of

$.getJSON('http://localhost:3000/tags.json' + '&callback=?', function(data)

use this

$.getJSON('/tags.json' + '?callback=?', function(data)

edited Aug 18 '13 at 17:59

answered Aug 18 '13 at 00:23

Sachin Singh

7,107
6
40
80

@ebbflowgo if you are checking in production environment, clean and recompile all your assets. – Sachin Singh Aug 18 '13 at 04:55
I now get a new error. GET url.com/tags.json&callback=jQuerysomthing 406 (Not Acceptable) – 1dolinski Aug 18 '13 at 05:09
Hi Sachin Singh, I have posted it above – 1dolinski Aug 18 '13 at 13:28
@ebbflowgo use '?callback=?' instead of '&callback=?' in your code. – Sachin Singh Aug 18 '13 at 14:29
Sachin Singh, I get the same GET 406 error. However, when I plug the tags.json?callback=? into the URL I do get the json populating which is a good sign. As a side note, when I do ?callback=? there is a '?' before the JSON so I think it's better to have ?callback= – 1dolinski Aug 18 '13 at 15:41
@ebbflowgo clean and recompile the assets again. – Sachin Singh Aug 18 '13 at 16:52
thanks very much it works now! As a side note, what's the best way to clean and recompile for heroku production? I did it several ways, on my local drive using heroku run rake assets:clobber; heroku run rake assets:precompile; and then on my local drive I did RAILS_ENV=production bundle exec rake assets:precompile, after which I committed it.. – 1dolinski Aug 18 '13 at 17:12

Access-Control-Allow-Origin getJSON Rails

1 Answers1