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!

Stay in the loop with our latest content!

Select the topics you’re interested to receive our new relevant content in your inbox. Don’t worry, we won’t spam you.

Clutch Names Michigan Software Labs as a 2019 Top Developer in U.S.A.
Business Team

Clutch Names Michigan Software Labs as a 2019 Top Developer in U.S.A.

November 14, 2019

Clutch is a B2B research, ratings, and reviews firm located in downtown Washington, D.C.. Clutch connects businesses with the best-fit agencies, software, and consultants they need to tackle business challenges together and with confidence. Clutch’s methodology compares business service providers and software in a specific market based on verified client reviews, services offered, work quality, and market presences.

Read more
Michigan Software Labs Named One of the Country's Best Small and Medium Workplaces by Fortune copy
Press Release

Michigan Software Labs Named One of the Country's Best Small and Medium Workplaces by Fortune copy

October 16, 2020

Michigan Software Labs has been named as one of the 100 Best Small and Medium Workplaces based on an independent survey by consulting firm Great Place to Work® and Fortune Magazine. Michigan Software Labs came in 64 on the list.

Read more
MichiganLabs joins GVSU and local employers to accelerate talent creation in Michigan
Press Release

MichiganLabs joins GVSU and local employers to accelerate talent creation in Michigan

February 7, 2023

Grand Valley State University is launching a work-and-learning program with five inaugural West Michigan-based partners designed to accelerate the connection between talent and employers. The partners invest in GVSU students who become employees during college and after graduation.

Read more
View more articles