CORS (Cross-Origin Resource Sharing) i Access-Control-Allow-Origin
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
