Ajax won't send post to rails app

Question

I have a webpack frontend with a rails backend. They are running on different ports, and I believe this is causing me problems when I am trying to post form data to one of my rails controller end points. I have googled for a few hours and I am getting frustrated. I have no idea why I can't send a post request. here is my ajax request:

handleSubmit(e) {
 e.preventDefault();
 $.ajax({
   type: "POST",
   dataType: "jsonp",
   contentType: "application/json; charset=utf-8",
   url: "http://localhost:3000/api/v1/organizations/",
   data: {
     organization: {
       name: $('#name').val(),
       email: $('#email').val(),
       description: $('#orgDescription').val(),
       password: $('#password').val(),
       password_confirm: $('#password_confirm').val(),
     }
   },
   success: function(data){
     debugger
   }, error: function(data){
     debugger
   }
 });
}

and here is my rails controller

def create
  debugger
  organization = Organization.new organization_params
  if organization.save
    render json: {organization: organization}, status: :ok
  else
    render json: {error: organization.errors.full_message}, status: :bad_request
  end
end

this is how the request is sent every time:

Started GET "/api/v1/organizations/?callback=jQuery311014517798618579714_1486919266215&organization%5Bname%5D=asd&organization%5Bemail%5D=asdf&organization%5Bdescription%5D=asdf&organization%5Bpassword%5D=[FILTERED]&organization%5Bpassword_confirm%5D=[FILTERED]&_=1486919266216" for 127.0.0.1 at 2017-02-12 10:07:51 -0700
Processing by OrganizationsController#index as JSON
  Parameters: {"callback"=>"jQuery311014517798618579714_1486919266215", "organization"=>{"name"=>"asd", "email"=>"asdf", "description"=>"asdf", "password"=>"[FILTERED]", "password_confirm"=>"[FILTERED]"}, "_"=>"1486919266216"}

the only thing I can think is that my dev server is running on port 5000 and my rails server is running on 3000. Can someone tell me what I am doing wrong?

no, no error. The problem is that I can only send GET requests, when I want to send a POST. — jfarn23, Feb 12 '17 at 17:23
I am starting to think it's because I don't have a CSRF token in my request, but I don't know how to get one there when my entry html file for webpack — jfarn23, Feb 12 '17 at 17:24
You probably don't want this forever, but you can disable CSRF token for particular controllers. Even more, you can specify what methods you want to include or exclude in the CSRF disabling. — bwalshy, Feb 12 '17 at 17:27
nvm, I already am disabling the CSRF in my controller :( `before_action :verify_authenticity_token` so now i am doubly lost — jfarn23, Feb 12 '17 at 17:33
[You can't POST using JSONP](http://stackoverflow.com/a/4508215/3399504), try using JSON instead. — ErvalhouS, Feb 12 '17 at 17:33
Ah, ok that is good to know. But then I get this error if I don't use jsonp `XMLHttpRequest cannot load http://localhost:3000/api/v1/organizations/. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:5000' is therefore not allowed access. The response had HTTP status code 404.` is posting between different ports just not a thing at all? — jfarn23, Feb 12 '17 at 17:36
Also, I do have this in my application controller: `before_action :allow_ajax_request_from_other_domains` `def allow_ajax_request_from_other_domains headers['Access-Control-Allow-Origin'] = 'http://localhost:5000' headers['Access-Control-Request-Method'] = '*' headers['Access-Control-Allow-Headers'] = '*' end` — jfarn23, Feb 12 '17 at 17:36

score 2 · Accepted Answer · edited May 23 '17 at 12:17

2

You need to configure some CORS into your application and stop using JSONP for POST requests, since you can't POST using JSONP.

Install gem rack-cors adding gem 'rack-cors', :require => 'rack/cors' to your Gemfile, run bundle install and try a loosy configuration for config/application.rb:

# Rails 3/4

config.middleware.insert_before 0, "Rack::Cors" do
  allow do
    origins '*'
    resource '*', :headers => :any, :methods => [:get, :post, :options]
  end
end

# Rails 5

config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins '*'
    resource '*', :headers => :any, :methods => [:get, :post, :options]
  end
end

You should consider a better config on production enviroment.

edited May 23 '17 at 12:17

Community

1
1

answered Feb 12 '17 at 17:39

ErvalhouS

4,178
1
22
38

thank you very much. would a better prod config include specifying the origin/resource to only accept requests from my front-end app? – jfarn23 Feb 12 '17 at 17:52
muchos gracias :) – jfarn23 Feb 12 '17 at 18:01

Ajax won't send post to rails app

1 Answers1