Sinatra和AngularJS之间的CORS问题

Question

Sinatra和AngularJS之间的CORS问题

Dou*_*oug 1 rest xmlhttprequest cross-domain sinatra angularjs

我有一个非常基本的网络应用程序的麻烦.这是我的文件:

公共/ 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>

Run Code Online (Sandbox Code Playgroud)

公共/ players.js

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

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

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

对我来说,这似乎很好.然后,我启动服务器:

启动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

Run Code Online (Sandbox Code Playgroud)

启动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

Run Code Online (Sandbox Code Playgroud)

但是当我使用localhost(端口4567)上的浏览器时,我有以下日志:

api.rb日志

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

Run Code Online (Sandbox Code Playgroud)

client.rb日志

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
- -> /

Run Code Online (Sandbox Code Playgroud)

我做了很多关于跨源资源共享的搜索,我测试了很多不同的方法.我目前不知道如何处理.感谢您的任何帮助.

编辑:

我的问题是,api.rb服务器error 404在AngularJS调用之后返回一个.此外,还有两个OPTIONS /hi请求,这很奇怪.我认为这是一个CORS症状,但我添加了一些标题以接受跨源查询.

而不是这个,服务器应返回200带有JSON的a.我真的不知道如何解决它.

Answer 1

zlo*_*log 5

我不得不将以下内容添加到我的sinatra应用程序中,以使其与CORS和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

Run Code Online (Sandbox Code Playgroud)

我也使用过sinatra-cross_origin,但是你可能不需要手动设置标题.

归档时间：	12 年，8 月前
查看次数：	4248 次
最近记录：	12 年，5 月前