I'm attempting to learn some web development by trying to read an RSS feed and then displaying the output on a single web page.
Currently when I attempt to read the RSS feed, I receive an error message:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://www.URL.com/rss.php?secret_key=*******&feedtype=download&timezone=0&showrows=50&categories=53,3,5. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).
Reading a similar post here, I thought the answer would be to add the header as shown in my code below but that doesn't work.
Any ideas why I'm receiving this error and how to resolve it?
code:
<!DOCTYPE html>
<html>
<head>
<title>RSS Reader</title>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
</head>
<script>
$(document).ready(function() {
//feed to parse
var feed = "https://www.URL.com/rss.php?secret_key=*******&feedtype=download&timezone=0&showrows=50&categories=53,3,5";
$.ajax(feed, {
accepts:{
xml:"application/rss+xml"
},
dataType:"xml",
headers: {
"Access-Control-Allow-Headers":"x-requested-with"
},
success:function(data) {
$(data).find("item").each(function () {
var el = $(this);
console.log("------------------------");
console.log("title : " + el.find("title").text());
console.log("link : " + el.find("link").text());
console.log("description: " + el.find("description").text());
});
}
});
});
</script>
<body>
this is a test page
</body>
</html>
