AngularJS JSONP GET Example
This is an example of a cross domain GET request using JSONP, the most common way to get data. Like the previous example using CORS, this too uses requires the server to be ‘aware’ of request so it can reply with the JSONP callback method.
AngularJS CORS example using httpbin.org
This is an example of a cross domain GET and POST request to a server with CORS headers enabled. It’s a very simple one field form that displays the echo’d response from httpbin. I chose httpbin since I knew it had CORS headers enabled, and seemed like a relatively simplistic tool to play around with.
As the code shows, GET requests are quite simple and look like a regular $http call. The heavy lifting is all done by the server
The POST request on the other hand is a little more complicated and requires some manipulation of the headers before the request itself.
First, we need to set the Content-Type to form-urlencoded to let the destination know we are posting form data:
$http.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded";
Second, we need to delete a header called “Requested-With” that is sent along with AJAX requests:
Also, to stop this mistruth from spreading any farther: A lot of blog posts about Cross Domain posting with Angular will show you this code:
$http.defaults.useXDomain = true
It’s not a real config value, you don’t need it. Seriously. Try it with and later without it, you won’t see a difference (I think the dojo toolkit may require it, I’m not sure how it made it’s way into multiple AngularJS examples).
We are big fans of AngularJS here at Arroyo Labs, and often our Angular Apps require a lot of AJAX to work: a simple GET request to load data here, a form POST there. You know, typical web stuff.
More than once we’ve made an App that needs to make an AJAX request to a different domain than the one our app lives on and hit some roadblocks. For one, your browser doesn’t really allow it (I’ll explain this later) and for the most part it’s a pain compared to hitting a local resource.
“Why would you need to do that? Why aren’t you making locally hosted APIs to access this data?!” you may blurt out while reading this. Well sometimes, you have to.
Sometimes you run into a weird legacy architecture or you can’t access the backend code. You may even want to do all of this work with only front-end level code. What if you need the client’s browser to resolve a domain for you? It’s also possible you have been making AJAX requests to other domains and never encountered an issue until now.
The point is, eventually you will have to make an AJAX request on another domain, so lets talk about it.
The Same Origin Policy
The Same Origin Policy is a security feature built into your browser (and most everybody else’s) for your safety. It prevents scripts from accessing anything outside of the current ‘site’ as the executed script, and by site I mean the same Scheme + Hostname + Port as the page executing the script.
Take a look at this chart from the wikipedia page, for a script executing from http://www.example.com/dir/page.html
You can’t even make a request to a subdomain like http://foobar.example.com without Same Origin stepping in and waving its finger in your face. Try it, and check your console log: “
not allowed by Access-Control-Allow-Origin" all over the place.
So, how do we get around the Same Origin Policy?
Theres a few ways to ‘relax’ the Same Origin Policy so you can actually interact with data from another domain.
Introduced relatively recently are a type of headers that tell your browser its ok with a requests from another domain. This is known as Cross Origin Resource Sharing or CORS. With these headers turned on, you can make POST & GETs just like you would with an endpoint on the same server as your script.
You will need access to the webserver configuration to make this happen, which is not an option for a site you have no control over. The guys over at enable-cors.org do a good job explaining how to enable this for the most common webservers.
Also, I should note, this is the only method that allows you to send a POST request to another domain.
In fact, here is our example
2) Proxy (with CORS)
This solution involves a middle man proxy that does have a CORS headers that passes along your request to a server that does not have CORS headers. Yes, this is a hack-y way to just make a cURL call to a webservice.
This is the most common way to make a GET request to another domain, and is probably the method with the least effort required.
This method isn’t really possible with the $http object (the traditional way to make AJAX requests with AngularJS), but it’s still a viable option for some cross domain communication. I think it’s an interesting concept worth exploring and I think would be a cool way to explore promises and error states.
With some work and concessions, you can make cross domain requests. We’ll provide some working code examples soon.
A talk John and I gave on D3 & MeteorJS at our last MeteorJS LA Meetup. We touched on some D3 basics, and discussed some challenges we faced integrating it with MeteorJS.
code available at: https://github.com/ArroyoLabs/meetups
My favorite bookmark site Springpad, recently announced it is shutting its doors. This is a bit sad, but not too surprising. I use it everyday, yet talking with some of my peers I realize that many don’t even know it exists and some question why it exists at all.
My previous bookmarking service was delicious. It was at the time the best service, but when there were scares of it going away I switched to Springpad. It didn’t die, instead it just suffered slow stagnation under yahoo ownership.
with the death of Springpad I see new boosts in users happening for Evernote and Pocket…both great services.
There have been others, Glass, this was before google glass. it was a private bookmark and sharing app. A great set of engineers but they couldn’t define a market niche nor define a viable business model. They were a really smart team and had some cool tech, but not an end product that had legs.
(Stolen from Andy)
We added Bootstrap 3 support to Erdiko, https://github.com/arroyo/Erdiko
We spent a little bit of time recently refactoring the theming layer and the folder structure. The folder structure changes took a couple of cues from frameworks like Laravel and Kohana.
We have some ideas to make Erdiko more powerful and faster, keep an eye out in the coming months.