我有一个基于Sinatra的服务器,它为我正在处理的服务提供RESTful API.在我的开发机器上运行localhost:9393.
同时,用于用户身份验证的客户端应用程序(内置ember.js)ember-auth在另一个端口上运行:localhost:9000.
以前我在同一主机上设置服务器和客户端:端口和返回的客户端应用程序作为静态文件.身份验证工作得很好.根据SignIn 的官方文档,我在我提供的路线(/signin)上获得了POST请求.但现在我接受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>
ros*_*sta 11
您的REST API和客户端应用程序来自不同的来源; 协议,主机和端口必须相同才能遵循同源策略.您的浏览器正在进行预检OPTIONS请求,以确定您的服务器是否允许来自客户端域的跨源资源共享(CORS).
要使CORS与Sinatra服务器一起使用,您可能需要检查机架,这将允许您添加中间件以设置必需的访问控制标头.一旦设置正确,将在成功的OPTIONS请求之后发出预期的POST请求.
有关CORS的更多信息,以下是我发现有用的一些资源: