Ajax call will read link to xml file but not a link from a feed

Question

I feel like the answer to this question is right out in front of my face but I can't seem to find the answer. I have built a lightweight xml reader that I can use easily on the front end with multiple feeds(from the same source).

I noticed that it will not pull properly if I try to pull the actual feed link but if I save the feed link as an xml file, upload to dropbox, and pull from that it works fine.

Does anyone know where i may be goofing up?

thanks in advance, here's my code:

$('.events-pull').each(function() {
  var URL = $(this).attr('data-link');
  var pullNum = $(this).attr('data-num');
  var $this = $(this);
  $this.append('<ul></ul>');
  $.ajax({
  type: 'POST',
  url: URL,
    dataType: 'xml',
  success: function(xml) {
    $(xml).find('item').each(function(i){
      if(i >= pullNum) {return false;}
      var title = $(this).find('title').text();
      var link = $(this).find('link').text();
      var month = $(this).find('pubDate').text().substring(7,11);
      var day = $(this).find('pubDate').text().substring(4,7);
      $this.find('ul').append('<li><strong>'+month+' '+day+' - </strong><a href="'+link+'" target="_blank" class="no-icon">'+title+'</a></li>');
    });
  },
  error: function() {$this.find('ul').append('<li>Oops! There was a problem loading these events.</li>');}
  });
});

In case this helps at all here is a link where you can see both instances: http://codepen.io/daless14/pen/AxwID

If you manually visit each link, you'll see that they contain the exact same content.

Answer 1

Figured out the solution (Thanks to a comment in this resource) and thought I would share.

I just needed to enable CORS on the website where the feed was being pulled from.

Basically I just added the code below into my .htaccess file:

Header add Access-Control-Allow-Origin “*”
Header add Access-Control-Allow-Headers “origin, x-requested-with, content-type”
Header add Access-Control-Allow-Methods “GET”