0

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>
Bhav
  • 1,957
  • 7
  • 33
  • 66
  • 1
    your error message is very clear. your target server is not allow another server (from different domain) to make request. if your target server is under your control, you can confgure it. if you dont have any control. you can use server side script to grab the content. – plonknimbuzz Mar 04 '18 at 22:10
  • @plonknimbuzz I can access the feed URL in a browser so what's the difference? – Bhav Mar 04 '18 at 23:00
  • really nice question. `same origin policy` is security method that implemented by browser to prevent javascript making request to others website (cross domain). if you are access url using browser (directly), you dont have any js which request to crossdomain. So ofc you are not getting blocked. i hope you understand why your js is blocked because your browser is prevent them to making request on cross domain if the target server not give respond specify respond header which is `Access-Control-Allow-Origin` – plonknimbuzz Mar 05 '18 at 00:11
  • read [this article](https://spring.io/understanding/CORS) you will get better explaination than mine. – plonknimbuzz Mar 05 '18 at 00:17

0 Answers0