Question

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

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

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

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

的index.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>

app.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
  }
});

user.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();
  }
});

application.hbs

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

auth.hbs

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

signin.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>

Answer 1

您的REST API和客户端应用程序来自不同的来源;协议，主机和端口必须与same-origin policy相同。您的浏览器正在制作预检OPTIONS请求，以确定您的服务器是否允许来自您的客户端域的cross-origin resource sharing (CORS)。

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

有关CORS的更多信息，以下是我发现有用的一些资源：

ember-auth在我的开发机器上发送OPTIONS请求而不是POST

1 个答案: