Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

JQuery AJAX request to Sinatra app blocked by CORS

I have been struggling with this for quite sometime now. I believed I had the issue resolved, but lo and behold, it arised again.

Here is my problem from localhost:

OPTIONS http://my.server.com/authorize Origin http://localhost is not allowed by Access-Control-Allow-Origin. jquery-1.8.2.min.js:2
XMLHttpRequest cannot load http://my.server.com/authorize. Origin http://localhost is not allowed by Access-Control-Allow-Origin. 

I am trying to make a request from a client to my Sinatra application. My client code is as follows:

function authorize(token)
{
  $.ajax({
    url: "http://my.server.com/authorize/authorize",
    crossDomain: "true",
    jsonp: "false",
    async: true,
    headers: {"Authorization" : token},
    success: function(data){
      console.log("success");
      window.location = (envHost+"/fb/authenticate");
    }
  });
}

In my Sinatra application I made an effort to enable CORS. I have tried both of the following ways:

options '/*' do
  headers['Access-Control-Allow-Origin'] = "*"
  headers['Access-Control-Allow-Methods'] = "GET, POST, PUT, DELETE, OPTIONS"
  headers['Access-Control-Allow-Headers'] ="accept, authorization, origin"
end

and

before do  
  headers['Access-Control-Allow-Methods'] = 'GET, POST, PUT, DELETE, OPTIONS'
  headers['Access-Control-Allow-Origin'] = '*'
  headers['Access-Control-Allow-Headers'] = 'accept, authorization, origin'
end

Even in my Apache Passenger VirtualHost I made the following addition

  <Directory    /var/Developer/MySite/public>
   Options     -MultiViews
   AllowOverride All
   Allow       from all
   Header set Access-Control-Allow-Origin "*"
   Header set Access-Control-Allow-Methods: "GET, POST, PUT, DELETE, OPTIONS"
   Header set Access-Control-Allow-Headers: "accept, authorization, origin"
  </Directory>

This has been a pain in the neck. If anyone has guidance, it would be much appreciated on why CORS will not work.

like image 451
Clayton Selby Avatar asked Jan 29 '26 05:01

Clayton Selby


1 Answers

I have found the answer to my problem. Initially, I was adding the header information to the Passenger web server via my sites-available/defaults file, and the Sinatra web service routes. Having set the CORS response headers in both places caused my response headers to have duplicate header information about the allowed origin, methods, etc.

Once I removed the headers from the web server, and left them on the web service routes, my requests went through.

like image 69
Clayton Selby Avatar answered Jan 31 '26 19:01

Clayton Selby