XHR denied even though Access-Control-Allow-Origin header is present?

Question

On my development server written in Rails 3, I set the CORS headers in my application controller to allow cross-domain access:

class ApplicationController < ActionController::Base
  before_filter :cross_domain_setup
  # ...
  def options_request
    head :no_content
  end
  def cross_domain_setup
    response.headers["Access-Control-Allow-Origin"] = "*"
    response.headers["Access-Control-Allow-Methods"] = "GET, PUT, POST, DELETE, OPTIONS"
    response.headers["Access-Control-Allow-Headers"] = "Content-Type, X-Requested-With"
  end
  # ...
end

# in routes.rb:
match "*path" => "application#options_request", constraints: { method: "OPTIONS" }

Here's my frontend code (Sencha Touch):

// note: this should probably be done using MVC, but my server doesn't
// have a RESTful API for this particular resource
var statusText = accepted ? "accepted" : "ignored";
Ext.Ajax.request({
    url: "http://localhost:3000/friends/requests",
    method: "PUT",
    params: {
        friend_request: {
            _id: friendRequest.internalId,
            status: statusText
        }
    },
    success: success,
    failure: failure
});

This sends the following HTTP request:

OPTIONS /friends/requests?_dc=1388320908671 HTTP/1.1
Host: localhost:3000
Connection: keep-alive
Cache-Control: no-cache
Pragma: no-cache
Access-Control-Request-Method: PUT
Origin: http://localhost
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/31.0.1650.63 Safari/537.36
Access-Control-Request-Headers: x-requested-with, content-type
Accept: */*
Referer: http://localhost/path/to/index.html
Accept-Encoding: gzip,deflate,sdch
Accept-Language: en-US,en;q=0.8

My server responds with:

HTTP/1.1 204 No Content
Date: Sun, 29 Dec 2013 12:41:48 GMT
Status: 204 No Content
Connection: close
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, PUT, POST, DELETE, OPTIONS
Access-Control-Allow-Headers: Content-Type, X-Requested-With
X-UA-Compatible: IE=Edge
Cache-Control: no-cache
Set-Cookie: blahblahblah; path=/; HttpOnly
X-Request-Id: 01157976a93af661045eefdf4b8beb2e
X-Runtime: 0.016029

which all looks correct. So how come I get the following error in the Developer Tools?

XMLHttpRequest cannot load http://localhost:3000/friends/requests?_dc=1388320920825. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access.

Not all requests are blocked. I haven't yet figured out why.

What could be going wrong?

Answer 1

I think what was happening was that the requested resource was producing a 500 internal server error (can't convert symbol into integer, etc etc), but this showed up as a blocked request maybe because the CORS headers weren't being sent due to the 500 error?

Whatever the case, using the rack-cors gem seems to have solved the problem. Now my front end receives the 500 error as expected.