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

Question

我正在将 Ember.js 应用程序及其 Express REST API 对应项拆分为两个不同的项目。我以为这样会更干净。

在此之前，我的 Express 应用程序同时提供 REST 端点和所有静态文件，例如 index.html 和 app.js。但现在，ember-cli 负责提供静态文件，Express 应用处理身份验证 + REST。

我遇到的最后一个问题是我现在有两个不同的端口：ember-cli 使用 http://localhost:4200 和 express 使用 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 并设置代理通行证

第一个解决方案不行，因为部署后两个应用程序将使用相同的域/端口。第二种解决方案可能会奏效，但要求开发人员安装本地 Web 服务器来简单地运行应用程序似乎有点荒谬。

我相信你们中的许多人以前都遇到过这个问题。您有什么建议可以简化开发？

谢谢！

Answer 1

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

在此处找到以下说明：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，这使得上述所有内容都过时了。

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