Access-Control-Allow-Origin error when using ember.js(with ember-cli)

Question

Here is my routes in (app/routes/customers.js):

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

here is my router.js:

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

http://127.0.0.1:3000/odata/customers is my api, but ember-cli use http://localhost:4200/, when I open http://localhost:4200/，

in the console, the error message is: XMLHttpRequest cannot load http://127.0.0.1:3000/odata/customers. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access.

I find a article: https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

so I know what's wrong, but I don't kown how to fix it when use ember.js.

sorry for my poor English, hope thats clear...

Answer 1

It's not Ember that is the problem. it's the server at port 3000. If your Ember app is running on a different port, it is basically cross domain and thus the server at port 3000 must be CORS enabled. Example of this is like this for node js and express: http://enable-cors.org/server_expressjs.html You need to figure out how to do this for your back end. But what it comes down to is just basically adding the right headers into the response stream.

Some other example:

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

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

Note that if you do want to prevent the Ember server from sending requests to other origins, you can use Content Security Policies.