Google AMP - Cors
In diesem Kapitel werden wir versuchen, CORS in AMP zu verstehen. Bevor wir uns näher mit den Details befassen, lassen Sie uns die Grundlagen von CORS und deren Nützlichkeit verstehen.
Was ist CORS?
CORS steht für Cross Origin Resource Sharing. CORS ist ein Prozess, der zusätzliche HTTP-Headerdaten benötigt, um dem Browser mitzuteilen, ob die Anforderung an die URL durch die Webseite, die beispielsweise bei xyz.com origin ausgeführt wird, die Berechtigung zum Zugriff auf die Daten über die angeforderte URL erhalten soll. Wir stellen viele http-Anfragen von der Webseite und dafür müssen wir CORS eingerichtet haben, um die erforderlichen Daten zu erhalten.
Wenn wir eine http-Anfrage an einen anderen Server als den Host senden, nennen wir sie als Cross-Origin-Anfrage. Dies bedeutet, dass sich entweder die Domäne, das Protokoll und der Port vom Host-Ursprung unterscheiden. In diesem Fall sollte die angeforderte URL eine Berechtigung zum Zugriff auf die Daten enthalten. Dies bedeutet, dass eine Anforderung GET / PUT / POST / DELETE gestellt wurde.
Diese zusätzlichen Daten sind im Browser-Header für den getätigten http-Anforderungsaufruf verfügbar. Dieser Berechtigungsschritt ist grundsätzlich aus Sicherheitsgründen erforderlich, damit keine Webseite ohne die erforderliche Berechtigung Daten von einer anderen Domain erstellen oder abrufen kann.
Der Header des Browsers sollte Details wie enthalten Access-Control-Allow-Origin die Werte haben können wie unten gezeigt -
Access-Control-Allow-Origin : *Wenn der Anforderungs-URL-Header den Wert * enthält, werden die Browser angewiesen, das Anfordern von Daten von einem beliebigen Ursprung für den Zugriff auf die Ressource zuzulassen.
Access-Control-Allow-Origin: https://www.example.comWenn der Wert wie oben angegeben ist, wird dem Browser mitgeteilt, dass die von der Webseite www.example.com gestellte Anfrage nur die Daten für die angeforderte URL abrufen darf.
Bei der Serverkonfiguration für CORS muss berücksichtigt werden, wie die gemeinsam genutzten Daten verwendet werden. Abhängig davon müssen die erforderlichen Header auf der Serverseite gesetzt werden.
Nachdem wir nun wissen, was CORS ist, gehen wir noch einen Schritt weiter. Im Falle von Amp haben wir Komponenten wie Amp-Form, Amp-List, die http-Endpunkte verwenden, um Daten dynamisch zu laden.
Bei Amp-Seiten muss die CORS-Einstellung vorhanden sein, auch wenn die http-Anforderung vom selben Ursprung stammt. Hier stellen sich Fragen: Warum sollte CORS aktiviert sein, auch wenn die Anfrage und die Antwort denselben Ursprung haben? Technisch gesehen muss CORS in diesem Fall nicht aktiviert sein, da wir Daten für dieselbe Domain, denselben Ursprung usw. anfordern und anzeigen.
Amp verfügt über eine Funktion namens Caching, die hinzugefügt wird, um die Daten schneller an den Benutzer weiterzuleiten, der auf die Seite gelangt. Falls der Benutzer die Seite bereits besucht hat, werden die Daten auf Google CDN zwischengespeichert. Der nächste Benutzer erhält Daten aus dem Cache.
Die Daten werden am Amp-Ende gespeichert, das jetzt eine andere Domäne hat. Wenn der Benutzer auf eine Schaltfläche klickt, um neue Daten abzurufen, wird die Amp-Cache-URL mit der Webseiten-Domain verglichen, um die neuen Daten abzurufen. Wenn das CORS jetzt nicht aktiviert ist, da es sich um eine zwischengespeicherte URL und die Webseiten-Domain handelt, ist die Anforderung ungültig und schlägt für die CORS-Berechtigung fehl. Dies ist der Grund, warum CORS bei Amp-Seiten auch für denselben Ursprung aktiviert sein muss.
Ein Arbeitsbeispiel für die Arbeit mit Formularen mit aktiviertem CORS wird hier gezeigt:
<!doctype html>
<html amp lang = "en">
<head>
<meta charset = "utf-8">
<script async src = "https://cdn.ampproject.org/v0.js">
</script>
<title>Google AMP - Form</title>
<link rel = "canonical" href = "ampform.html">
<meta name = "viewport" content = "width = device-width,
minimum-scale = 1,initial-scale = 1">
<style amp-boilerplate>
body{
-webkit-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;animation:
-amp-start 8s steps(1,end) 0s 1 normal both
}
@-webkit-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}
</style>
<noscript>
<style amp-boilerplate>
body{
-webkit-animation:none;
-moz-animation:none;
-ms-animation:none;
animation:none}
</style>
</noscript>
<script async custom-element = "amp-form"
src = "https://cdn.ampproject.org/v0/amp-form-0.1.js">
</script>
<script async custom-template = "amp-mustache"
src = "https://cdn.ampproject.org/v0/amp-mustache-0.2.js">
</script>
<style amp-custom>
form.amp-form-submit-success [submit-success],
form.amp-form-submit-error [submit-error]{
margin-top: 16px;
}
form.amp-form-submit-success [submit-success] {
color: white;
background-color:gray;
}
form.amp-form-submit-error [submit-error] {
color: red;
}
form.amp-form-submit-success.hide-inputs > input {
display: none;
}
</style>
</head>
<body>
<h3>Google AMP - Form</h3>
<form
method = "post"
class = "p2"
action-xhr = "submitform.php"
target = "_top">
<p>AMP - Form Example</p>
<div>
<input
type = "text"
name = "name"
placeholder = "Enter Name" required>
<br/>
<br/>
<input
type = "email"
name = "email"
placeholder = "Enter Email"
required>
<br/>
<br/>
</div>
<input type = "submit" value = "Submit">
<div submit-success>
<template type = "amp-mustache">
Form Submitted! Thanks {{name}}.
</template>
</div>
<div submit-error>
<template type = "amp-mustache">
Error! {{name}}, please try again.
</template>
</div>
</form>
</body>
</html>submitform.php
<?php
if(!empty($_POST)){
$domain_url = (isset($_SERVER['HTTPS']) ? "https" : "http") .
"://$_SERVER[HTTP_HOST]";
header("Content-type: application/json");
header("AMP-Access-Control-Allow-Source-Origin: " . $domain_url);
header("Access-Control-Expose-Headers:
AMP-Access-Control-Allow-Source-Origin");
$myJSON = json_encode($_POST);
echo $myJSON;
}
?>Ausgabe
Die Details der Antwortheader, die zu submitform.php hinzugefügt wurden -
Damit das Formular funktioniert, müssen wir Header wie Access-Control-Expose-Header mit dem Wert AMP-Access-Control-Allow-Source-Origin und Amp-Access-Control-Permit-Source-Origin hinzufügen. http://localhost:8080.
Hier verwenden wir PHP-Datei und Apache ist der verwendete Server. In der PHP-Datei haben wir die erforderlichen Header wie unten gezeigt hinzugefügt -
<?php
if(!empty($_POST)){
$domain_url = (isset($_SERVER['HTTPS']) ? "https" : "http") .
"://$_SERVER[HTTP_HOST]";
header("Content-type: application/json");
header("AMP-Access-Control-Allow-Source-Origin: " . $domain_url);
header("Access-Control-Expose-Headers:
AMP-Access-Control-Allow-Source-Origin");
$myJSON = json_encode($_POST);
echo $myJSON;
}
?>Wenn die erforderlichen Überschriften hinzugefügt werden, wird der Ursprung angegeben http://localhost:8080 darf interagieren und die Daten zurückerhalten.,