CORS issue: Getting error “No 'Access-Control-

Question

I doubt the backend serving my app is important, but if you care, I'm using rack-cors with a Rails 4.0 app.

Using jQuery, I send my app a PATCH request like so:

$.ajax({
  url: "http://example.com/whatever",
  type: "PATCH",
  data: { something: "something else" }
})

When I trigger this call from Chrome, I see a successful OPTIONS request go out, which returns these headers from my server:

Access-Control-Allow-Credentials:true
Access-Control-Allow-Headers:accept, content-type
Access-Control-Allow-Methods:GET, PUT, PATCH, OPTIONS
Access-Control-Allow-Origin: http://sending-app.localhost:3000
Access-Control-Expose-Headers:
Access-Control-Max-Age:15

Then I see a PATCH request go out, which throws this error:

XMLHttpRequest cannot load http://example.com/whatever. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://sending-app.localhost:3000' is therefore not allowed access.

I have tried switching from PATCH to PUT with the same results.

This doesn't make any sense to me. What's going on?

Update: My config/application.rb

I thought the headers told the whole story, but since people are confused, here's my config/application.rb file, which is how the rack-cors plugin for Rails is configured:

config.middleware.use Rack::Cors do
  allow do
    origins '*'
    resource '*',
      :headers => :any,
      :methods => [:get, :put, :patch, :options],
      :max_age => 15
  end
end

Answer 1

You might want to add this to your config/application.rb file:

#config/application.rb
config.middleware.use Rack::Cors do
  allow do
    origins '*'
    resource '/*', :headers => :any, :methods => :patch
  end
end

The resource part is where you define which methods / requests your endpoint can accept!

Hope this helps

Answer 2

This is some strange stuff.

A) As a trial you should try entering in * as your allowed origin.

B) Is this a whitespace issue? After the colons you don't have spaces in some of the options.

C) This looks like a "preflighted request" (https://developer.mozilla.org/en-US/docs/HTTP/Access_control_CORS). A preflighted request is one that doesn't use "application/x-www-form-urlencoded," which yours should be. http://api.jquery.com/jquery.ajax/ states the default content type is x-www-form-urlencoded, and you aren't overriding content type. That means there shouldn't need to be 2 requests.

D) As noted above, CSRF might be the issue. I am not a rails person. If it is the issue what you may want to do is attach your CSRF token to all ajax sends like so:

$.ajaxSetup({ 
    beforeSend:function(xhr, settings){
        xhr.setRequestHeader('X-CSRF-Token', '<%= csrf_token_value %>');
    } 
});

There are a few other ways to do this. It depends what your frameworks/libraries need.

Answer 3

Here is what I found to solve the issue from older SO posts to deal with csrf issues:

# In application_controller.rb
protect_from_forgery

after_filter :set_csrf_cookie

def set_csrf_cookie
  cookies['XSRF-TOKEN'] = form_authenticity_token if protect_against_forgery?
end

protected

# In Rails 4.2 and above
def verified_request?
  super || valid_authenticity_token?(session, request.headers['X-XSRF-TOKEN'])
end

Answer 4

Exclude Rails CSRF checking in the action ;)

That is, Rails checks for an authenticity token with update/create requests. Within your Rails app, this token is added to all of your forms. But with javascript requests, including it is tricky.

You can skip checking it for an action by adding this to your controller:

skip_before_filter :verify_authenticity_token, :only => [:update]

BTW, your problem had nothing to do with CORS, you were getting a bad error message in the browser. The Rails log tells the real story.