2

I have an HTML page at the following address:
https://www2.casailaria.it/news/
I wish I could read some elements of the DOM with an http call via javascript.
I'm trying them all, but I still have that damned console error: CORS header "Access-Control-Allow-Origin" missing.
I tried the following ajax call without success, studding it with alleged parameters:

<!DOCTYPE html>
<html lang="it">

<head>
    <meta charset="utf-8" />
    <title>MAURIZIO</title>
    <link rel="stylesheet" type="text/css" href="background.css">
</head>

<body>
    <script src="https://code.jquery.com/jquery-3.5.1.js"
        integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
    <script>
        $.ajax("https://www2.casailaria.it/news/", {
            dataType: "jsonp",
            cors: true,
            secure: true,
            headers: {
                'Access-Control-Allow-Origin': '*', // or 'Access-Control-Allow-Headers: x-requested-with'
            },
            success: function (response) {
                console.log(response);
            }
        }); 
    </script>
</body>

</html>

I hope I'm not too far from the solution, and I think I'm going around it. Once obtained I would simply like to do operations like: response.getElementsByClassName('myClassOfOtherPage')

What do I have to add/remove to make it work well?
Other javascript solutions are welcome as well as ajax calls, as long as they are part of the CDN.
Thanks in advance!

Memmo
  • 330
  • 1
  • 7
  • 22
  • I guess your problem is answered here https://stackoverflow.com/questions/31276220/cors-header-access-control-allow-origin-missing – Tushar Jajodia May 15 '20 at 08:02
  • I tried, nothing. In that question, however, reference is made to a json and not to an html page. Another thing that is not specified is where to place the code `Header set Access-Control-Allow-Origin "*"`. And both that and other questions almost never specify where to put `Access-Control-Allow-Origin : *`. Only by doing a lot of browsing I discovered that it had to go inside `headers`...! Remains the fact that the problem is not solved. – Memmo May 15 '20 at 08:34
  • 1
    I think you are getting confused. Access-Control-Allow-Origin comes in the Response Header and is not something you will send to a site. It is a security mechanism to prevent the access of resources from unknown domain. read this. https://stackoverflow.com/questions/10636611/how-does-access-control-allow-origin-header-work – Tushar Jajodia May 15 '20 at 09:48
  • So how do I read the dom? If you think about it I guess it's feasible and not against security. If anyone can view the page source, why can't I access the dom elements via javascript? – Memmo May 15 '20 at 10:01
  • 1
    I am no master at these thing. The web site you are trying to reach is a news web site so they will have a very strong security. You cannot enable the cross-site access or read policy by yourself at client side. What you can do is use a proxy if you are using some server side scripting language. https://stackoverflow.com/questions/31513450/jquery-ajax-request-being-block-because-cross-origin – Tushar Jajodia May 15 '20 at 11:02
  • Server side is easy, I've already done it with basic php. The problem is that he needs a web server to run... Client side would have been a great challenge. – Memmo May 15 '20 at 12:39
  • @Memmo you can't proxy forbidden CORS requests clientside. You can use CORS proxies like [CORS Anywhere](https://github.com/Rob--W/cors-anywhere/) to fetch the data. – Christos Lytras May 29 '20 at 22:50
  • I tried the native client side part but it doesn't work. It doesn't give me a mistake but I don't see anything... – Memmo Jun 01 '20 at 07:21
  • if i am not clearly missing something, you need a crawler or a scrapper to achieve the required functionality , the endpoint is not an API that you can access . take a look at [here](https://stackoverflow.com/questions/9813273/web-scraping-in-php) for a solution in PHP – Abdullah Abid Jun 05 '20 at 11:08

4 Answers4

1

CORS is meant to protect the user from stealing sessions and data on other websites where the user is logged in.

The page that you are trying to load through AJaX is hosted on a different domain.

If you are developing locally, and just want to test, you can start Chrome with a flag to ignore CORS. Here is how to do that

If you want to host your page on a different domain, you need to add the CORS header to https://www2.casailaria.it/news/. If that page is created using PHP, you can add this to that page:

header("Access-Control-Allow-Origin: *");

Note that * is not safe. It should be the domain of the page from which the AJaX call is originating.

Joel'-'
  • 356
  • 1
  • 11
  • Unfortunately I can't use the php, it would have been perfect otherwise, the page in question would have done it all like this... – Memmo Jun 01 '20 at 06:36
  • If you can't change the source page, then it will never be possible to fetch it with AJAX from a different domain. – Joel'-' Jun 01 '20 at 09:32
  • I could, but via client. The page is static and fully developed with html css and javascript + bootstrap... – Memmo Jun 01 '20 at 10:45
1

I just found this site is hosted by Apache. Normally you have to enable cors on Apache before you can call it from a different domain.

To enable cors on Apache, check this out https://enable-cors.org/server_apache.html

After you enable it on the backend site. Try it again and it should work.

Martin Tsan
  • 11
  • 2
  • Welcome to SO. You might like to put the relevant part of the links in your answer as the links may be removed or get expired. – ABGR Jun 05 '20 at 08:49
0

There are two fixes you can try implementing :

  1. Add CORS addon to your browser and enable it when you access your page.

or

  1. Add "https://cors-anywhere.herokuapp.com/" before your url that is mentioned in your ajax call. So resulting url will be https://cors-anywhere.herokuapp.com/https://www2.casailaria.it/news/

These things will work when you are accessing code locally.

If you opt for option 2 following will be the structure of your ajax call:

         $.ajax("https://cors-anywhere.herokuapp.com/https://www2.casailaria.it/news/", {
        dataType: "jsonp",
        cors: true,
        secure: true,
        headers: {
            'Access-Control-Allow-Origin': '*', // or 'Access-Control-Allow-Headers: x-requested-with'
        },
        success: function (response) {
            console.log(response);
        }
    });
JaGo
  • 31
  • 2
  • Well, I see a plausible solution. At this point, how should the ajax call be structured? Can you give me an example? – Memmo Jun 04 '20 at 06:59
  • I am just suggesting to modify url and keep your ajax call structure same as you have. I have added the modified ajax call to my answer. please check – JaGo Jun 04 '20 at 14:36
0

It's impossible to request the page from the browser if they're Access-Control-Allow-Origin headers won't allow it.

You could set up a little server and request the page no problem on the back end, or you could use some kind of proxy that makes that request for you and returns the data. There used to be a proxy called anyorigin that would do that, but it's offline. Probably because that sort of thing is sketchy.

georgedum
  • 471
  • 3
  • 9