RESTAdapter Issue?

Ember Data
1

Hi,

I’m learning Ember to put a front-end on a web app I’m building. I’m very comfortable with back-end services, but it’s been a long time since I did any front-end work. I’m planning to use a back-end built using AWS Lambda (node.js) fronted by API Gateway. I have built my first function, and the API Gateway is configured to handle OPTIONS and POST requests.

I have an ember action that handles submission of a form. The action code in a controller (I know I should really be using route actions??) is as follows.

var self = this;

function transitionToConfirm(invite) { self.transitionToRoute(‘confirm’, invite); }

function failure(reason) { alert('Fail! ’ + reason) }

export default Ember.Controller.extend({ actions: { confirmEmail() { var invite = this.store.createRecord(‘invite’, { email: this.get(‘email’) }); invite.save().then(transitionToConfirm).catch(failure); } } });

I have an application adapter configured to send requests to my back-end. Every time I trigger the action from a template, there is a failure that is alerted.

The adapter operation was aborted

I am using the ember inspector, and I’m a little confused. The network pane reports a successful OPTIONS request that returns a HTTP status code of 200, and there is a subsequent POST request that also returns a HTTPS status code of 200. The Lambda function via API Gateway fires correctly. From this perspective all seems as expected.

However, in the inspector console panel, I see the error

XMLHttpRequest cannot load https://xxxxx/v1/invites. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:4200’ is therefore not allowed access.

I’m not sure why I am receiving this error if the POST is successfully made. Is it possible I have some misconfigured that is creating an error, and ember is mis-reporting this?

Thanks in advance, any advice would be appreciated. I decided to use ember because teams I manage have used React and AngularJS but never ember, so I wanted to explore this for myself.

cheers

Mark

2

This is probably because the response from your request does not set Access-Control-Allow-Origin to * in the header. Due to this, the browser will prevent the response to the request as the development environment origin(http://localhost:4200) isn’t the same as the response origin.

On Chrome, for testing,you can use this extension(https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en) to set the header for all responses