从jsonapi加载模型时，ember中止过渡到路由

Question

I have a very basic ember application. It defines a route called "clock" and a model called "timezone".

models/timezone.js:

import DS from 'ember-data';

export default DS.Model.extend({
  title: DS.attr(),
  technicalName: DS.attr(),
  utcOffset: DS.attr()
});

routes/clock.js:

import Route from '@ember/routing/route';

export default Route.extend({
  model() {
    return this.get('store').findAll('timezone');
  }
});

The data is loaded from a rest api that returns data according to the json api specification. I am using an application adapter:

adapters/application.js:

import DS from 'ember-data';

export default DS.JSONAPIAdapter.extend({
  host: 'http://localhost:3000'
});

The api returns the following data when calling http://localhost:3000/timezones :

{"data":
 [
  {
   "type":"timezones",
   "id":"1",
   "attributes": {
    "title":"Local Time",
    "technical-name":"alfa",
    "utc-offset":1
    }
   }
]}

However ember refuses to render the clock route:

Attempting URL transition to /clock
Transition #0: application: calling beforeModel 
Transition #0: application: calling deserialize hook
Transition #0: application: calling afterModel hook
Transition #0: clock: calling beforeModel hook
Transition #0: clock: calling deserialize hook
Transition #0: clock: transition was aborted

What am I missing here?

Answer 1

Finally I found the problem. It was a Cross-Origin Issue. I solved it by adding

'connect-src': "'self' http://localhost:3000"

the the ember environment config (config/environment.js) and adding the Access-Control headers in the response of my express application:

app.use(function(req, res, next) {
    res.setHeader('Access-Control-Allow-Origin', 'http://localhost:4200');
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    res.header('Access-Control-Allow-Methods', 'POST, GET, PUT, DELETE, OPTIONS');
    next();
});