Make a request get to a web page with Javascript, "error no 'access-control-allow-origin' header [duplicate]

Question

Make a request get to a web page with Javascript, "error no 'access-control-allow-origin' header [duplicate]

Navigation

#1 by (1 votes)
#2 by (0 votes)

1

I need to use the get method with pure javascript or with jquery to get the information I do not care if it takes the whole body of the page or just the JSON data, try in several ways and it never works for me I always get the < strong> "error not 'access-control-allow-origin' header is present on the requested resource" .

I also tried to do it with a page from localhost and it did not help either, I only hope that someone can help me.

This is the page I want to access, link .

HTML code

<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>List of elements</title>
		<link rel="stylesheet" type="text/css" href="css/styles.css" />
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	</head>
	
	<body>
		<div id="container">
			<div>
				<img src="img/shadow-profile-people-header.jpg" />
			</div>
			
		</div>
		<script src = "js/main.js"></script>
		
	</body>
</html>

javascript html5

asked by dougblizz 09.08.2018 в 20:15

source

2 answers

I must make a query to a code but in the BD is the code with zeros on the left PHP Fatal Error: Class "Controller" not found

score 1 · Answer 1

In the main.js I put this:

var obj = JSON.parse('[{"title":"Duglimar Ocando","content":"Arquitecta de 24 años, mujer preciosa que hace lindas casas y rica comida, pero con un instinto asesino por dentro.","photo":"https://www.mipleo.cl/src/users/20180306/6f05c3b3bbdc798b5eb39b9bdb4242780.jpg"},{"title":"Waldo Urribarri","content":"Ingeniero de 30 añ super apuesto y amigable.","photo":"https://avatars2.githubusercontent.com/u/3824104?v=4"},{"title":"Douglas Ocando","content":"Estudiante de ingeniería en informática, aprendiendo a programar como los pros.","photo": "https://scontent.fscl1-1.fna.fbcdn.net/v/t1.0-9/10398462_1131206958953_7974744_n.jpg?_nc_cat=0&oh=42b723ef5035f15cb69b38fbed516a09&oe=5B506B73"},{"title":"Yenny Gil","content":"Enfermera. Dicen que viene a hacerle empanadas a Duglimar. Ver para creer.","photo":"https://scontent.fscl1-1.fna.fbcdn.net/v/t1.0-9/12347852_10207393282248849_2542999839803620587_n.jpg?_nc_cat=0&oh=82f9c83ece84821899593e764f3d4b94&oe=5B8F54ED"}]');
if(obj!=null){
    console.log(obj[0]["title"]);
    for(o in obj){
        console.log(o+' >> '+obj[o].title+'  >> '+ obj[o].content+'  >> '+obj[o].photo);
    }
}

On your html page you can use this:

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Lista de elementos</title>
        <link rel="stylesheet" type="text/css" href="css/styles.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    </head>

    <body>
        <div id="container"></div>

        <script src = "js/main.js"></script>
        <script type="text/javascript">
            for(var i=0 ; i < obj.length; i++){
                document.getElementById("container").innerHTML += "<p>title:"+obj[i].title+"</p><br/><p>content:"
                +obj[i].content+"</p><br/><img src="+obj[i].photo+"></>";
            }
        </script>


    </body>
</html>

Output:

score 0 · Answer 2

This is the request using javascript fetch

function getDatos() {
    let url = 'http://www.waldou.com/personas.json';
    return fetch(url)
        .then(function (response) {
            response.json();
        });
}

getDatos().then(function(data){
  //Procesar los datos
  let resData = data; //aqui la variable debe de tener esto:[{"title":"Duglimar Ocando","content":"...", "photo":"..." },{"title":"Waldo Urribarri","content":"...", "photo":"..." }]
  
  let _container = document.getElementById("container");
  
  for(var itemData of resData){
     _container.innerHTML += '<p>title:${itemData.title}</p><br/><p>content:${itemData.content}</p><br/><img src=${itemData.photo}></>';
  }
  
});

However there is a problem with the request since the server is not configured to receive requests from another source.

The CORS must be enabled so that the request can be processed. You can find more of the topic here:

link