CODEWITHSUNDEEP
javascriptjavascript-frameworkangularjsdirective
Dustin
Dustin

Reputation: 8267

Using templateURL to load from an external resource in AngularJS

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?

Upvotes: 1

Views: 2387

Answers (1)

Ranjith Ramachandra
Ranjith Ramachandra

Reputation: 10764

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.

Upvotes: 3

Related Questions