Using templateURL to load from an external resource in AngularJS

Question

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?

Ranjith Ramachandra · Accepted Answer · 2012-10-02 17:08:41Z

3

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.

answered Oct 2, 2012 at 17:08

Ranjith Ramachandra

10.9k16 gold badges62 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Dustin Over a year ago

Is there another way to do this (I would have to submit a request to the server people and wait until they get around to it) - possibly with .htaccess perhaps? I do have FTP access.

Ranjith Ramachandra Over a year ago

The problem is most browsers do not allow such requests to be made. Some stupid security issue. this might help: usejquery.com/posts/the-jquery-cross-domain-ajax-guide, though I personally think talking to your CDN team is the best option.

Guillaume86 Over a year ago

If you can't get the CDN to send the correct headers, you can add a reverse proxy in your server to inject the headers yourself.

Dustin Over a year ago

Guillaume86, can you point me in a direction where I might learn how to do that?

Collectives™ on Stack Overflow

Using templateURL to load from an external resource in AngularJS

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related