使用ember.js（带有ember-cli）时出现Access-Control-Allow-Origin错误

Question

以下是我在 (app/routes/customers.js) 中的路由:

export default Ember.Route.extend({
  model: function() {
    return $.getJSON("http://127.0.0.1:3000/odata/customers");
  }
});

这是我的router.js文件：

export default Router.map(function() {
  this.route('customers', {path: '/'});
});

http://127.0.0.1:3000/odata/customers 是我的API，但是ember-cli使用http://localhost:4200/。当我打开http://localhost:4200/时，在控制台中出现了错误消息：

XMLHttpRequest无法加载http://127.0.0.1:3000/odata/customers。所请求的资源上没有“Access-Control-Allow-Origin”头。因此，来自'http://localhost:4200'的访问被禁止。

我找到了一篇文章：https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

所以我知道问题出在哪里，但我不知道如何在使用ember.js的情况下解决它。

抱歉我的英语不好，希望这很清楚......

- ChiangDi

Answer 1

不是Ember的问题，而是端口3000的服务器的问题。如果您的Ember应用程序在不同的端口上运行，它基本上是跨域的，因此端口3000的服务器必须启用CORS。例如，对于node js和express，如下所示：http://enable-cors.org/server_expressjs.html您需要弄清楚如何为后端执行此操作。但归根结底，只是将正确的标头添加到响应流中。

其他一些示例：

http://enable-cors.org/server_iis7.html

http://enable-cors.org/server_php.html

注意，如果您想防止Ember服务器向其他来源发送请求，您可以使用内容安全策略。

- Jimmy Chandra

---

这个答案似乎是不正确的。显然，加载的第一页由运行在端口4200上的Ember CLI应用程序提供。谁加载第一页就负责设置Access-Control-Allow-Origin标头。端口3000上的API服务器与此无关。相反，Ember服务器应该告诉浏览器可以对localhost:3000进行ajax调用，这是通过我提到的标头完成的。 - Ivan Ivanov

嗯...这不是反过来了吗？Ember服务器是在4200端口托管当前的Web应用程序。该Web应用程序正在调用另一个位于3000端口的服务器，据我所知，Access-Control-Allow-Origin是由3000端口的服务器返回的...请参见https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS。有一节他们解释了电线中发生了什么... - Jimmy Chandra

CORS 的目的是防止浏览器向除了源（在我们的情况下是本地主机：4200 上的 Ember）之外的服务器发出 ajax 调用，因为它们可能是恶意的。现在想象一下，如果浏览器允许像您建议的那样向任何启用 CORS 的服务器发出 ajax 调用 - 在这种情况下是本地主机：3000。现在，任何恶意服务器都可以“启用 CORS”并接受调用。多么安全啊！ - Ivan Ivanov