如何为Ember.js + Express设置开发环境

时间:2014-07-13 21:50:15

标签: ember.js express nginx ember-cli

我正在将Ember.js应用程序及其Express REST API分成两个不同的项目。我认为事情会更加清洁。

在此之前,我的Express应用程序既提供REST端点,又提供所有静态文件,如index.htmlapp.js。但现在,ember-cli负责提供静态文件,Express应用程序处理身份验证+ REST。

我遇到的最后一个问题是我现在有两个不同的端口:ember-cli使用http://localhost:4200并表达使用http://localhost:3333。当我在认证时从Express获得会话cookie时,由于相同的原始策略,它永远不会在后续请求中发送(参见:How do I send an AJAX request on a different port with jQuery?)。

现在,如果我理解正确,我有两个解决方案:

  1. 安装Express以支持JSONP并确保Ember也使用它
  2. 安装本地Nginx或Apache并设置代理传递
  3. 第一个解决方案不行,因为部署后两个应用都将使用相同的域/端口。第二种解决方案可能会有效,但要求开发人员安装本地Web服务器以简单地运行应用程序似乎有点荒谬。

    我相信很多人之前都遇到过这个问题。你有什么建议让开发变得简单?

    谢谢!

1 个答案:

答案 0 :(得分:5)

嗯。好像我找到了另一个解决方案:

按照说明找到:http://discuss.emberjs.com/t/ember-data-and-cors/3690/2

export default DS.RESTAdapter.extend({
    host: 'http://localhost:3333',
    namespace: 'api',
    ajax: function(url, method, hash) {
        hash = hash || {}; // hash may be undefined
        hash.crossDomain = true;
        hash.xhrFields = { withCredentials: true };
        return this._super(url, method, hash);
    })
});

您还需要在Express应用中添加以下标题:

// Add support for cross-origin resource sharing (localhost only)
app.all('*', function(req, res, next) {
    if (app.get('env') === 'development') {
        res.header('Access-Control-Allow-Origin', 'http://localhost:4200');
        res.header('Access-Control-Allow-Headers', 'X-Requested-With, Content-Type');
        res.header('Access-Control-Allow-Credentials', 'true');
        res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
    }
    next();
});

那就是它!最后一步是确保Ember仅在开发环境中使用CORS

<强>更新

Ember-cli现在有一个集成的proxy feature,使上述所有内容都过时了。

来自文档:&#34;使用--proxy标志将所有ajax请求代理到给定地址。例如,ember server --proxy http://127.0.0.1:8080会将您的所有应用XHR代理到在端口8080上运行的服务器。&#34;