I am creating a custom directive in AngularJS that takes advantage of the templateUrl key. The problem I'm running in to is that we are hosting these template files on an external CDN, so I am getting an Access-Control-Allow-Origin error.
XMLHttpRequest cannot load http://path_to_cdn/template_file.html. Origin http://xx.xx.xx.xx is not allowed by Access-Control-Allow-Origin.
I read somewhere that I could do something like this...
<script type="text/ng-template" src="http://path_to_cdn/template_file.html"></script>
...but this is not really ideal and I couldn't get it to work properly anyway.
Anyone have any suggestions?
The problem is server side. This is one way to solve it
Assuming you have access to both the servers, you do this:
First the terminologies
Domain 1: The domain which loads the javascript that makes the templateURL request
Domain 2: The domain from which you are trying to get template from
You have to set Access-Control-Allow-Origin option in the response header of Domain 2. The value of it should be the url of the Domain 1.