如何在EmberJS应用程序中启用CORS? [英] How to enable CORS in an EmberJS application?
问题描述
当我转到URL localhost:4200 / items
在Firefox控制台中出现以下错误:
内容安全策略:该页面的设置阻止了 http:// localhost:7654 / api / items (connect -src http:// localhost:4200 ws:// localhost:35729 ws://0.0.0.0:35729 http://0.0.0.0:4200 )。
我试过安装 ember-cli-cors
,但没有改变,我也在 http://discuss.emberjs.com/t/ember-data-and-cors/3690 ,但这并没有奏效,这个讨论是从2013年开始的,所以不是一个巨大的惊喜。
REST API是使用Flask和Flask-cors编写的。使用网络选项卡,我可以看到请求正在发送,并且数据被发回,但是错误仍然存在。响应中标题 Access-Control-Allow-Origin
设置为 http:// localhost:4200
,因为
app / router.js
从ember导入Ember;
从'./config/environment'导入配置;
var Router = Ember.Router.extend({
location:config.locationType
});
export default Router.map(function(){
this.route('items');
});
app / adapters / application.js
从ember-data导入DS;
export default DS.RESTAdapter.extend({
namespace:'api',
host:'http:// localhost:7654',
});
app / routes / items.js
从ember导入Ember;
导出默认值Ember.Route.extend({
model:function(){
return this.store.find('item');
}
});
app / models / item.js
从ember-data导入DS;
导出默认DS.Model.extend({
name:DS.attr(),
});
app / templates / items.hbs
{{项目中的每个项目}}
{{item.name}}< br>
{{else}}
< p>否项目< / p>
{{/ each}}
{{outlet}}
这是一个不是CORS的CSP问题
在config / environment.js中找到ENV.contentSecurityPolicy并添加 http:// localhost:7654 到您的connect-src键
例如
ENV.contentSecurityPolicy = {
// ...其他东西在这里
'connect-src ':''self'http:// localhost:7654
}
也许您的生产环境可能需要不同的设置。
I have an EmberJS application that uses ember-data to access data via a REST API. The REST API is running on the same machine but on a different port (although this probably applies to REST API's that are served from another domain.
When I go to the URL localhost:4200/items
I get the following error in the Firefox console:
Content Security Policy: The page's settings blocked the loading of a resource at http://localhost:7654/api/items ("connect-src http://localhost:4200 ws://localhost:35729 ws://0.0.0.0:35729 http://0.0.0.0:4200").
I tried installing ember-cli-cors
but nothing changed. I also tried the solution at http://discuss.emberjs.com/t/ember-data-and-cors/3690, but that didn't work either. That discussion was from 2013, so that's not a huge surprise.
The REST API is written in python using Flask and Flask-cors. Using the network tab I can see that the request is being sent, and the data being sent back, but the error is still there. The header Access-Control-Allow-Origin
is set to http://localhost:4200
in the response, as expected.
app/router.js
import Ember from 'ember';
import config from './config/environment';
var Router = Ember.Router.extend({
location: config.locationType
});
export default Router.map(function() {
this.route('items');
});
app/adapters/application.js
import DS from 'ember-data';
export default DS.RESTAdapter.extend({
namespace: 'api',
host: 'http://localhost:7654',
});
app/routes/items.js
import Ember from 'ember';
export default Ember.Route.extend({
model: function() {
return this.store.find('item');
}
});
app/models/item.js
import DS from 'ember-data';
export default DS.Model.extend({
name: DS.attr(),
});
app/templates/items.hbs
{{#each item in items}}
{{ item.name }}<br>
{{else}}
<p>No items</p>
{{/each}}
{{outlet}}
This is a CSP issue not CORS
Inside config/environment.js find the ENV.contentSecurityPolicy and add http://localhost:7654 to your 'connect-src' key
e.g.
ENV.contentSecurityPolicy = {
// ... other stuff here
'connect-src': "'self' http://localhost:7654"
}
You will probably need a different setting for your production environment as well.
这篇关于如何在EmberJS应用程序中启用CORS?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!