Ember-auth sends OPTIONS requests instead of POST on my development machine

I have a Sinatra-based server that provides a RESTful API for the service I'm working on. On my development machine it runs on localhost:9393 .

At the same time, my client application (built using ember.js ), which uses ember-auth to authenticate the user, runs on a different port: localhost:9000 .

Earlier, I configured both the server and the client on the same host: the port and the returned client application as static files. Authentication worked very well. According to the official docs in SignIn, I get a POST request on the route you specify ( /signin ). But now I get an OPTIONS request without any parameters.

Some code from the client (the client is generated using the 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> 
+4
source share
1 answer

Your REST API and client application are served from different sources; protocol, host and port must be identical, following policies of the same origin . Your browser queries the OPTIONS options to determine if your server will allow resource sharing (CORS) from your client domain.

To get CORS to work with your Sinatra server, you can check out rack-cors , which will allow you to add middleware to set the necessary access control headers. After properly configured, the expected POST request will be issued after a successful OPTIONS request.

More on CORS, here are some resources I found useful:

+11
source

Source: https://habr.com/ru/post/1481117/


All Articles