4

我有一个基于 Sinatra 的服务器，它为我正在处理的服务提供 RESTful API。在我的开发机器上运行localhost:9393.

同时，用于用户身份验证的我的客户端应用程序（ember.js使用 构建）ember-auth在另一个端口上运行：localhost:9000.

以前我在同一主机上设置服务器和客户端：端口并将客户端应用程序作为静态文件返回。身份验证工作得很好。根据 SignIn 上的官方文档，我在我提供的路线上收到 POST 请求（/signin）。但是现在我收到了没有任何参数的OPTIONS请求。

来自客户端的一些代码（客户端是通过 Yeoman 的 ember-generator 生成的）：

索引.html

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <title>Ember Starter Kit</title>

    <!-- build:css styles/main.css -->
    <link rel="stylesheet" href="styles/normalize.css">
    <link rel="stylesheet" href="styles/bootstrap.css">
    <link rel="stylesheet" href="styles/bootstrap-responsive.css">
    <link rel="stylesheet" href="styles/style.css">
    <!-- endbuild -->
  </head>
  <body>

    <!-- build:js scripts/components.js -->
    <script src="components/jquery/jquery.js"></script>
    <script src="components/handlebars/handlebars.runtime.js"></script>
    <script src="components/ember/ember.js"></script>
    <script src="components/ember-data/ember-data-latest.js"></script>
    <script src="components/ember-auth/ember-auth.js"></script>
    <!-- endbuild -->

    <!-- build:js scripts/main.js -->
    <script src="scripts/app.js"></script>
    <script src="scripts/models/user.js"></script>
    <script src="scripts/views/auth.js"></script>
    <!-- endbuild -->

    <!-- build:js(.tmp) scripts/templates.js -->
    <script src="scripts/compiled-templates.js"></script>
    <!-- endbuild -->
  </body>
</html>

应用程序.js

var App = window.App = Ember.Application.create();

App.Store = DS.Store.extend({
  revision: 12,
  adapter:'DS.RESTAdapter'
});

App.Router.map(function() {
  // I have no routes so far,
  // as I don't need them to test authentication itself
});

App.Auth = Ember.Auth.create({
  signInEndPoint: '/signin',
  signOutEndPoint: '/signout',
  tokenKey: 'auth_token',
  baseUrl: 'http://localhost:9393',
  tokenIdKey: 'user_id',
  userModel: 'App.User',
  sessionAdapter: 'cookie',
  modules: [
    'emberData', 'rememberable'
  ],
  rememberable: {
    tokenKey: 'remember_token',
    period: 7,
    autoRecall: true
  }
});

用户.js

App.User = DS.Model.extend({
  email: DS.attr('string'),
  param: DS.attr('string')
});

auth.js

App.AuthView = Ember.View.extend({
  templateName: 'auth'
});

App.AuthSignInView = Ember.View.extend({
  templateName: 'signin',
  email: null,
  password: null,
  remember: true,
  submit: function(event, view){
    event.preventDefault();
    event.stopPropagation();
    App.Auth.signIn({
      data:{
        email: this.get('email'),
        password: this.get('password'),
        remember: this.get('remember')
      }
    })
  }
});

App.AuthSignOutView = Ember.View.extend({
  templateName: 'signout',
  submit: function(event, view){
    event.preventDefault();
    event.stopPropagation();
    App.Auth.signOut();
  }
});

应用程序.hbs

<div class="container">
  <div class="row">
    <div class="span3">
      {{view App.AuthView}}
    </div>
    <div class="span9">
      {{outlet}}
    </div>
  </div>
</div>

认证.hbs

{{#if App.Auth.signedIn}}
  {{view App.AuthSignOutView}}
{{else}}
  {{view App.AuthSignInView}}
{{/if}}

登录.hbs

<form>
  <label>Email</label>
  {{view Ember.TextField valueBinding="view.email"}}
  <label>Password</label>
  {{view Ember.TextField type='password' valueBinding="view.password"}}
  {{view Ember.Checkbox checkedBinding="view.remember"}}
  <label>Remember me?</label>
  <hr />
  <button type="submit">Sign In</button>
</form>
4

1 回答 1

11

您的 REST API 和客户端应用程序来自不同的来源；协议、主机和端口必须相同才能遵循同源策略。您的浏览器正在发出预检 OPTIONS 请求，以确定您的服务器是否允许来自您的客户端域的跨域资源共享 (CORS) 。

要让 CORS 与您的 Sinatra 服务器一起工作，您可能需要查看rack-cors，它允许您添加中间件来设置必要的访问控制标头。一旦正确设置，预期的 POST 请求将在成功的 OPTIONS 请求之后发出。

有关 CORS 的更多信息，这里有一些我发现有用的资源：

于 2013-05-16T12:23:25.353 回答