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

oyjwcjzk  于 2022-11-05  发布在  其他
关注(0)|答案(1)|浏览(151)

我正在将Ember.js应用程序和它的Express REST API对应部分拆分成两个不同的项目。
在此之前,我的Express应用程序同时为REST端点和所有静态文件(如index.htmlapp.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.设置快速支持JSONP,并确保Ember也使用它
1.安装本地Nginx或Apache并设置代理传递
第一种解决方案不可行,因为部署后两个应用程序将使用相同的域/端口。第二种解决方案可能可行,但要求开发人员安装一个本地Web服务器来简单地运行一个应用程序似乎有点荒谬。
我相信你们中的很多人以前都遇到过这个问题。你有什么建议可以让开发变得容易?
谢谢你!

4xy9mtcn

4xy9mtcn1#

嗯。看来我找到了另一个解决办法:
遵循此处的说明: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标志将所有 AJAX 请求代理到给定地址。例如,ember server --proxy http://127.0.0.1:8080将把所有应用程序XHR代理到运行在端口8080的服务器。”

相关问题