Easy CORS for Angular Apps in Legacy Browsers

October 10, 2014

Out of the box, Angular.js won’t work with IE8/IE9 because CORS is not fully implemented. Fortunately, XDomain offers a painless set-and-forget way to add full CORS support to IE8 and IE9. XDomain works by creating an iframe in the Angular app and loading a “proxy” from the API server. All XHRs are intercepted and rerouted through the iframe to the API server.

Configuring XDomain is really simple. Inside index.html, place a conditional comment for IE9 and below that loads the XDomain library and sets up the URLs of the slave proxies. xdomain.slaves expects a dictionary of host:path configuration data that specifies where it should load the slave proxy from for a given cross-domain host. Here’s a sample of what that might look like:

<!--[if lte IE 9]>

<script src="//cdn.rawgit.com/jpillora/xdomain/gh-pages/dist/0.6/xdomain.min.js"></script>

<script>
xdomain.slaves({
 "http://127.0.0.1:5000": "/static/proxy.html",
 "http://localhost:5000": "/static/proxy.html",
 "http://api.staging.com": "/static/proxy.html",
 "https://api.production.com": "/static/proxy.html"
});
</script>

<![endif]-->

Note that the XDomain slave configuration must happen before loading any other libraries to ensure that it’s hooks are installed properly. On the API server, you will need to host a proxy.html file that contains the configuration for the slaves. If your API server is using Flask, this is as simple as creating a static directory in the root of the Flask project and putting the proxy.html file there. Flask will serve files from this directory without any additional configuration. The slave configuration is very similar to the master’s configuration. xdomain.masters expects a dictionary of host:path data that specifies what paths the proxy should respond to for each given master:

<script src="//cdn.rawgit.com/jpillora/xdomain/gh-pages/dist/0.6/xdomain.min.js"></script>

<script>
xdomain.masters({
 "http://127.0.0.1:9000": "*",
 "http://localhost:9000": "*",
 "http://api.staging.com": "*",
 "https://api.production.com": "*"
});
</script>

Thats it! Legacy browser support in about 20 lines or less!

Looking for more like this?

Sign up for our monthly newsletter to receive helpful articles, case studies, and stories from our team.

Build vs. buy: How to decide between custom software, off-the-shelf, or hybrid solutions
Business Development

Build vs. buy: How to decide between custom software, off-the-shelf, or hybrid solutions

October 9, 2024

Deciding whether to build custom software or buy off-the-shelf involves weighing factors like cost, flexibility, and scalability. While off-the-shelf solutions are quick and affordable, custom software offers more control and long-term adaptability. Sometimes, a hybrid approach combining both options can be the most effective for a business’s unique needs.

Read more
Lessons Learned from our Associate Developer
Team

Lessons Learned from our Associate Developer

September 13, 2023

One of our Associate Software Developers, Rohit, reflects on his time at MichiganLabs working on a short-term project, what he learned about real-world development, and the software consultancy business model.

Read more
The impact of tech stack choices on software ROI
Android Development iOS

The impact of tech stack choices on software ROI

October 30, 2024

Choosing the right tech stack is key to optimizing software performance, scalability, and maintenance costs. Learn how we work side-by-side with our clients to make sure their tech stack choices line up with their business goals, budget, and long-term vision.

Read more
View more articles