Question

我有一个非常基本的余烬应用程序。它定义了一个名为“clock”的路由和一个名为“timezone”的模型。

模型/ timezone.js：

import DS from 'ember-data';

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

路由/ clock.js：

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

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

数据是从rest api加载的，它根据json api规范返回数据。我正在使用应用程序适配器：

适配器/ application.js中：

import DS from 'ember-data';

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

在调用http://localhost:3000/timezones时，api会返回以下数据：

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

然而，ember拒绝渲染时钟路径：

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

我在这里缺少什么？

Answer 1

最后我发现了问题。这是一个跨领域问题。我通过添加

解决了这个问题

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

ember环境配置（config / environment.js）并在我的快递应用程序的响应中添加Access-Control标头：

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

从jsonapi

1 个答案: