CORS (Cross-Origin Resource Sharing) i Access-Control-Allow-Origin

De Wikijoan
Dreceres ràpides: navegació, cerca

Contingut

CORS. Explicació

Configuració Apache per habilitar CORS

Habilitar l'Apache per a crides CORS:

To add the CORS authorization to the header using Apache, simply add the following line inside either the <Directory>, <Location>, <Files> or <VirtualHost> sections of your server config (usually located in a *.conf file, such as httpd.conf or apache.conf), or within a .htaccess file:

Header set Access-Control-Allow-Origin "*"

Altering headers requires the use of mod_headers. Mod_headers is enabled by default in Apache, however, you may want to ensure it's enabled by run

$ a2enmod headers

Disposem d'un servidor Apache que podem fer servir per l'assignatura a:

Per defecte Access-Control-Allow-Origin no està habilitat, i no podem fer crides CORS. En el fitxer de configuració del site, la línia que ens interessa està comentada:

   Alias /iesbalmes "/var/www/iesbalmes/"
    <Directory "/var/www/iesbalmes/">
        Options Indexes MultiViews FollowSymLinks
        AllowOverride all
        Order deny,allow 
        Allow from all   
        DirectoryIndex index.htm,index.php
	#Habilitar o deshabilitar la següent línia per permetre CORS:	
	#Header set Access-Control-Allow-Origin "*" 
    </Directory>

El script list_recipes_text.php és un script molt senzill que proporciona la llista de receptes que hi ha en el servidor a partir de tots els fitxers xml que hi ha a la carpeta recipes/:

Tiramisu
Mini pay de queso con chocolate y avellana
Sopa de maní
Pique Macho
Baumkuchen (Pastel Rayado)
Galletas de mantequilla de maní
Arroz frito chino
Ceviche de pescado
Croquetas de patatas almendradas
Receta de Buñuelos de bacalao con verduras a la plancha
Sopa de tomate con huevo
Pechuga de pavo con relleno marinero
...

Volem accedir a aquesta informació remota des del nostre servidor local, i per tant fem una senzilla crida AJAX. El script receptes.html més senzill possible és:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function processar() {
	var xhttp = new XMLHttpRequest();
	xhttp.onreadystatechange = function() {
		if (this.readyState == 4 && this.status == 200) {
			console.log(this.responseText);
			document.getElementById("info").innerHTML = this.responseText;
		
		};
	};

	//ens connectem a un servidor remot per tal d'obtenir la llista de receptes:
	xhttp.open("GET", "http://joanqc.no-ip.biz/iesbalmes/wec/receptes/list_recipes_txt.php", true);
	xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
	xhttp.send();
}
</script>

</head>
<body>

<h1>Llistat de receptes</h1>
<h2>Provinents d'un servidor remot</h2>
<button onclick="processar()" type="button" value="Llistat">

<p id="info">info</p>
 
</body>
</html>

I la resposta del servidor és:

Access to XMLHttpRequest at 'http://joanqc.no-ip.biz/iesbalmes/wec/receptes/list_recipes_txt.php' from origin 'http://localhost' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Habilitem en el fitxer de configuració la línia que ens interessa, i ara ja podem fer la crida AJAX sense problema, doncs tenim habilitat en el servidor Apache la possibilitat de servir peticions que vénen de dominis remots.

Header set Access-Control-Allow-Origin "*" 

ja funciona!

Show HTTP response header using curl

$ curl -i "http://localhost/M06_UF4/receptes.html"
HTTP/1.1 200 OK
Date: Mon, 04 Feb 2019 18:48:57 GMT
Server: Apache/2.4.29 (Ubuntu)
Last-Modified: Mon, 04 Feb 2019 18:31:16 GMT
ETag: "31b-58115b2bf9d42"
Accept-Ranges: bytes
Content-Length: 795
Vary: Accept-Encoding
Content-Type: text/html

script list_recipes_txt.php

A títol informatiu, aquest és el script que s'executa en el servidor:

<?php

//header('Content-Type: charset=utf-8');
header('Content-Type: text/html; charset=utf-8');

if ($handle = opendir('recipes/')) {

    /* This is the correct way to loop over the directory. */
    while (false !== ($entry = readdir($handle))) {
        if (strstr($entry, '.xml')) {
            //SimpleXML functions are part of the PHP core
            $xml = simplexml_load_file('recipes/'.$entry)
                or die("Error: Cannot create object");

            foreach($xml->children() as $child)
            {
                if (!strstr($child->getName(),'recipe')) {
                //echo $child->getName() . ": " . $child . "<br />";
                if ($child->getName() == "title") {
                    $title = $child;
                    break;
                }
                }
            }
            echo $title."<br />";


        }
    }

    closedir($handle);
}
?>


creat per Joan Quintana Compte, febrer 2019

Eines de l'usuari
Espais de noms
Variants
Accions
Navegació
Institut Jaume Balmes
Màquines recreatives
CNC
Informàtica musical
joanillo.org Planet
Eines