CODEWITHSUNDEEP
restangularjsxmlhttprequestcross-domainsinatra
T5i
T5i

Reputation: 1530

CORS trouble between Sinatra and AngularJS

I'm in troubles with a very basic web app. Here are my files:

public/index.html

<!DOCTYPE html>

<html lang="en" data-ng-app>
  <body>

    <div data-ng-controller="PlayersCtrl">
      <div data-ng-repeat="player in players">
        {{player.id}}
      </div>
    </div>

    <script src="/angular.min.js"></script>
    <script src="/players.js"></script>
  </body>
</html>

public/players.js

function PlayersCtrl($scope, $http) {
  $scope.players = [];

  $http({
    method: 'GET',
    url: 'http://localhost:9292/hi'
  }).success(function(data) {
    $scope.players = data;
  });
}

client.rb

require 'sinatra'

get '/' do
  headers 'Access-Control-Allow-Origin' => '*'
  headers 'Access-Control-Allow-Headers' => 'Authorization,Accepts,Content-Type,X-CSRF-Token,X-Requested-With'
  headers 'Access-Control-Allow-Methods' => 'GET,POST,PUT,DELETE,OPTIONS'

  send_file File.join(settings.public_folder, 'index.html')
end

api.rb

require 'sinatra'
require 'json'

get '/hi' do
  headers 'Access-Control-Allow-Origin' => '*'
  headers 'Access-Control-Allow-Headers' => 'Authorization,Accepts,Content-Type,X-CSRF-Token,X-Requested-With'
  headers 'Access-Control-Allow-Methods' => 'GET,POST,PUT,DELETE,OPTIONS'

  [id: 1, name: "Bob"].to_json
end

To me, this seems good. Then, I start the servers:

Starting api.rb

$ ruby api.rb -p 9292
[2013-03-07 23:57:43] INFO  WEBrick 1.3.1
[2013-03-07 23:57:43] INFO  ruby 2.0.0 (2013-02-24) [x86_64-darwin12.2.0]
== Sinatra/1.3.5 has taken the stage on 9292 for development with backup from WEBrick
[2013-03-07 23:57:43] INFO  WEBrick::HTTPServer#start: pid=62634 port=9292

Starting client.rb

$ ruby client.rb
[2013-03-07 23:57:40] INFO  WEBrick 1.3.1
[2013-03-07 23:57:40] INFO  ruby 2.0.0 (2013-02-24) [x86_64-darwin12.2.0]
== Sinatra/1.3.5 has taken the stage on 4567 for development with backup from WEBrick
[2013-03-07 23:57:40] INFO  WEBrick::HTTPServer#start: pid=62610 port=4567

But when I go with a browser on localhost (port 4567), I have the following logs:

api.rb logs

127.0.0.1 - - [07/Mar/2013 23:57:46] "OPTIONS /hi HTTP/1.1" 404 442 0.0015
localhost - - [07/Mar/2013:23:57:46 CET] "OPTIONS /hi HTTP/1.1" 404 442
http://localhost:4567/ -> /hi

client.rb logs

127.0.0.1 - - [07/Mar/2013 23:57:46] "GET / HTTP/1.1" 304 - 0.0093
localhost - - [07/Mar/2013:23:57:46 CET] "GET / HTTP/1.1" 304 0
- -> /

I did a lot a search about Cross-origin resource sharing and I tested many different ways. I currently have no idea how to process. Thank you for any help.

Edit:

My problem is that, the api.rb server return an error 404 after the AngularJS call. Moreover, there is two OPTIONS /hi requests, which is weird. I think it's a CORS symptom, but I added some header in order to accept cross-origin queries.

Instead of this, the server should return a 200 with the JSON. I really don't see how to fix it.

Upvotes: 2

Views: 4544

Answers (1)

zlog
zlog

Reputation: 3306

I had to add the following to my sinatra app to get it to work with CORS and angular:

options "*" do
  response.headers["Allow"] = "HEAD,GET,PUT,DELETE,OPTIONS"

  # Needed for AngularJS
  response.headers["Access-Control-Allow-Headers"] = "X-Requested-With, X-HTTP-Method-Override, Content-Type, Cache-Control, Accept"

  halt HTTP_STATUS_OK
end

I also used sinatra-cross_origin, but you might not need that seeing as you set the headers manually.

Upvotes: 6

Related Questions