I'm using the ember-cli-simple-auth with ember-cli and everything it working great, until I try and set a new host on DS.RESTAdapter application wide.
As soon as I set
// adapters/application.js
exports default DS.RESTAdapter.extend({
host: 'https://api.example.com'
});
or even using reopen() it clears all the headers set by ember-simple-auth.
Am I not setting this up right in ember-cli?
If you're using a different domain for the REST API you need to configure that for OAuth 2.0 authenticator (assuming you're using that) and also make sure you have CORS enabled on the server side. You can find a tutorial here: http://log.simplabs.com/post/90339547725/using-ember-simple-auth-with-ember-cli.
Related
I am working on a new Ember.js project and using ember-cli-mirage to stub out my requests. The project is going to use ember-simple-auth and Auth0 for user authentication. I began implementing them in my project, but I'm getting a weird error in the console when I try to sign up with my Google account using the Auth0 login modal:
Your Ember app tried to GET 'https://(my auth0 domain).auth0.com/userinfo',
but there was no route defined to handle this request.
Define a route that matches this path in your
mirage/config.js file. Did you forget to add your namespace?
(my auth0 domain redacted above)
I have no idea why Mirage would be trying to stub out a request to an external URL. I was reading the Mirage docs and tried using this.passthrough() in my mirage/config.js file so Mirage would make a real request, but that seems to have had no effect (I'm guessing it only explicitly applies to routes within a namespace defined in the config file).
Can anyone help me understand why this is happening and how to stop Mirage from doing it? Thank you!
Ember CLI Mirage intercepts all ajax (XMLHttpRequest) and fetch requests by default. You have to whitelist the requests that should be passed through by using server.passthrough() method. (this is server instance in mirage/config.js.) You could use relative and absolute URLs with server.passthrough as well as with all route handlers. So server.passthrough('https://(my auth0 domain).auth0.com/userinfo') should fix your issue.
I'm developing an app using ember-cli and it need to send http request to a server using a ProxyPass.
My server looks like this : subdomain.domain.com/api/clients/users and Ember-cli create by default http://localhost:4200/
I tried to do this in my http.conf :
ProxyPass /api/clients http://subdomain.domain.com/api/clients
This is working fine for http://localhost/api/clients, but I don't know how to make it works with a non standard port such as 4200.
I also try to create a virtualHost but it's the same :
<VirtualHost *:4200>
ProxyPass /api/clients http://subdomain.domain.com/api/clients
</VirtualHost>
How can I do that ?
[EDIT]:
I set my RESTAdapter like this :
var ApplicationAdapter = DS.RESTAdapter.extend({
namespace: 'api/clients'
});
During development, you should use an http-proxy generator to create a path to your API. ember help generate lists the syntax:
http-proxy <local-path> <remote-url>
Generates a relative proxy to another server.
This generates a proxy that only exists during development (in /server/proxies/), and is not compiled in a production build. This is likely what you're looking for, based on what you've provided above:
ember generate http-proxy api http://subdomain.domain.com
Ember uses node-http-proxy to create the proxy, so you can customize it more using that documentation if necessary.
I'm in the process of splitting into two different projects an Ember.js app and its Express REST API counterpart. I assumed that things would be cleaner this way.
Until then, my Express app was both serving REST endpoints and all static files like index.html and app.js. But now, ember-cli is in charge of serving the static files and the Express app handles authentication + REST.
The last issue I'm having is that I now have two different ports: ember-cli uses http://localhost:4200 and express uses http://localhost:3333. When I get the session cookie from Express upon authentication, it's never being sent on subsequent request because of same origin policy (see: How do I send an AJAX request on a different port with jQuery?).
Now if I understand correctly I have two solutions:
Setup Express to support JSONP and make sure Ember uses it too
Install a local Nginx or Apache and setup a proxy pass
The first solution is not ok because after deployment both apps will use the same domain/port. The second solution would probably work but it seems a bit ridiculous to ask developers to install a local web server to simply run an app.
I'm sure many of you have encountered that issue before. What would you suggest to make development easy?
Thanks!
Hmm. Seems like I found another solution:
Following instructions found there: 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);
})
});
You will also need to add the following headers in the Express app:
// 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();
});
That's it! Last step is to make sure that Ember uses CORS only in the dev environment.
UPDATE
Ember-cli now has an integrated proxy feature that makes all the above obsolete.
From documentation: "Use --proxy flag to proxy all ajax requests to the given address. For example ember server --proxy http://127.0.0.1:8080 will proxy all your apps XHR to your server running at port 8080."
I'm building an ember application with a RESTAdapter to access my data in an api. I'm using the latest version of ember-data from https://github.com/emberjs/data/downloads.
This is how I'm declaring my RESTAdatpter-
App.ApplicationAdapter = DS.RESTAdapter.extend({
host: 'http://example.com'
});
but I dont think it's declared correctly as the ember inspector in the browser says that it cannot detect an adapter. Where am I going wrong?
I had the same issue and was able to get it to work using the following:
DS.RESTAdapter.reopen({
host: 'http://example.com'
})
I'm not sure if the guides need to be updated or if there's a different way to accomplish this.
It worked when I changed the ember data version to 1.0.0-beta.
please can you advise on the following:
I have a web application written in emberjs with Rails as back-end. And now I'm going to port this application with phonegap to iOS, and the thing that I'm struggling is how to set my API endpoint that will be working in iPhone?
As I understand EmberJs when used on the web via browser, uses your current location to issue API requests, but this approach doesn't working when using the application as iOS app.
I'm really looking for some elegant solution to simply replace the host name or something?
Thanks for help!
UPDATE:
This one works for changing the API URL
DS.RESTAdapter.reopen({
url: 'http://somedomain.com'
});
But now, there is access-controll issue:
Origin http://somedomain.com is not allowed by Access-Control-Allow-Origin.
Since you haven't posted any code on how your adapter is configured, this is the right way to set a custom url for your adapter:
DS.RESTAdapter.reopen({
url: 'https://somedomain.com/api'
});
Then if you have a model e.g. App.User, the requests for the list of App.User would now go to https://somedomain.com/api/user/ and for a specific user id to https://somedomain.com/api/user/123 respectively.
Update
When testing from the browser you have to start the browser (assuming chrome) with the flag --disable-web-security to make cross origin work. But in real live you have to configure your server to set the response HTTP HEADERS using:
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, ...
So in the case of rails you could do something like this to configure your controllers serverside to accept cross origin requests and set the headers accordingly:
...
after_filter :cors_set_access_control_headers
def cors_set_access_control_headers
headers['Access-Control-Allow-Origin'] = '*'
headers['Access-Control-Allow-Methods'] = 'POST, GET, PUT' # etc. etc.
headers['Access-Control-Max-Age'] = "1728000"
end
...
For more extensive examples on how to configure CORS for rails you could search for "CORS for JSON and Rails" for example.
Hope it helps