XMLHttpRequest cannot load. No 'Access-Control-Allow-Origin' header is present. (Apache/jQuery/AJAX)

Question

This seems to be a pretty common question on here, and I've through a couple dozen threads on the topic. However, none of the responses have worked for me so far. Basically I have a page with a jQuery/AJAX script that pulls a couple

elements from an external (cross-domain) page.

I've tried putting this in my .htaccess file:

Header set Access-Control-Allow-Origin "*"

as well as:

<ifModule mod_headers.c>
    Header set Access-Control-Allow-Origin: *
</ifModule>  

but no luck. My AJAX call is:

$.ajax({
    type: 'GET',
    url: 'url', //I have the actual URL here of course
    cache: false,
    contentType: 'text/plain',
    dataType: 'html',
    crossDomain: true,
    success: function( data ) {
        //doing stuff with data in here
    }, error: function(jqXHR, textStatus, errorThrown) {
        alert('critical error. everything is exploding. abort mission.');
    }
});

Everything works perfectly when I run the page from my desktop, but from the actual hosted server, the console error in Chrome reads:

"XMLHttpRequest cannot load http://external_url.com. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://my_url.com' is therefore not allowed access. 

Any ideas?

Answer 1

On my server I had to explicitely set the url in my vhost directory directive:

Header set Access-Control-Allow-Origin "http://mysite.mydomain.com"

on the site that will recieve the request.