Deutsch
Deutsch
In der Front-End-Entwicklung ist die Fetch- API eine sehr häufige Schnittstelle zum Senden von HTTP-Anfragen und zum Abrufen von Antworten. Um sicherzustellen, dass das Front-End und das Back-End die Daten korrekt austauschen können, ist die Konfiguration des Antwortheaders von entscheidender Bedeutung. PHP bietet eine Headerfunktion zum Einstellen von HTTP -Antwortheadern. Bei der Verwendung mit der Front-End -Fetch- API kann die korrekte Konfiguration sicherstellen, dass Probleme wie Antwortformate und Cross-Domänen-Anforderungen gelöst werden können.
In PHP wird die Header -Funktion verwendet, um RAW -HTTP -Antwort -Header an den Browser zu senden. Normalerweise wird es verwendet, um den Inhaltstyp (Inhaltstyp), die Cache-Steuerung, die CORS-Ressourcenfreigabe (CORS) und andere Informationen festzustellen.
<?php
// Stellen Sie den Antwortheader ein，Deklarieren Sie den Typ des Antwortinhaltstyps als JSON
header('Content-Type: application/json');
// aufstellen CORS Kopf，Erlauben Sie Anforderungen von bestimmten Domainnamen
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE');
header('Access-Control-Allow-Headers: Content-Type');
// Simulationsrückgabe JSON Daten
$response = ['message' => 'Hello, World!'];
echo json_encode($response);
?>
Im obigen PHP -Code wird die Header -Funktion verwendet, um den Antwortheader zu setzen, einschließlich des Inhaltstyps der Antwort im JSON -Format. Legen Sie Regeln für den Cross-Domänen-Zugriff über Access-Control-Allow-Origin-Origins fest, wodurch Anforderungen von jeder Quelle ermöglicht werden. Zu diesem Zeitpunkt kann das Front-End die Antwortdaten normalerweise über die Fetch -API empfangen.
Im Front-End-Code senden wir die Fetch -API, um HTTP-Anfragen zu senden und die Antwort zu erhalten. Die grundlegende Syntax des Abrufs lautet wie folgt:
fetch('http://m66.net/api/example.php', {
method: 'GET', // Anforderungsmethode
headers: {
'Content-Type': 'application/json' // Header anfordern，Senden angeben JSON 格式的Daten
}
})
.then(response => response.json()) // Analyse der Antwort JSON Daten
.then(data => console.log(data)) // Ausgabe响应Daten
.catch(error => console.error('Error:', error)); // Fehlerbehandlung
Der obige Code sendet eine GET-Anforderung an das PHP-Backend, in dem angegeben wird, dass der Inhaltstyp im Anforderungsheader Anwendung/JSON ist, was darauf hinweist, dass die Frontend-Antwortdaten im JSON-Format empfangen möchten.
Wenn sich das aktuelle Ende und das Backend nicht auf demselben Domain-Namen oder -Abschnitt befinden, stoßen Sie normalerweise Probleme mit der Cross-Domain-Anfrage. Damit die Fetch -API mit Cross-Domain-Anforderungen korrekt handelt, muss das Backend-Backend CORS (Cross-Domain-Ressourcenfreigabe) verwandte Einstellungen im Antwortheader hinzufügen.
In PHP können wir CORS-Header wie Access-Control-Allow-Origin durch die Headerfunktion einstellen, um den Zugang zu Cross-Domänen zu ermöglichen. Zum Beispiel:
// Erlauben Sie Cross-Domänen-Anfragen aus allen Quellen
header('Access-Control-Allow-Origin: *');
// 允许Anforderungsmethode GET、POST、PUT、DELETE
header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE');
// 允许Header anfordern中包含 Content-Type
header('Access-Control-Allow-Headers: Content-Type');
Diese Einstellungen stellen sicher, dass die Front-End -Abrufanforderung erfolgreich gesendet und Daten abgerufen werden kann, ohne vom Browser blockiert zu werden.
Wenn wir den Front-End- und Back-End-Code kombinieren, können wir ein vollständiges Beispiel erhalten, das zeigt, wie das Response- Header -Format mithilfe der Fetch -API von PHP korrekt eingestellt werden kann.
<?php
// Stellen Sie den Antwortheader ein
header('Content-Type: application/json');
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE');
header('Access-Control-Allow-Headers: Content-Type');
// Simulationsrückgabe JSON Daten
$response = ['message' => 'Hello, World!'];
echo json_encode($response);
?>
fetch('http://m66.net/api/example.php', {
method: 'GET',
headers: {
'Content-Type': 'application/json'
}
})
.then(response => response.json())
.then(data => console.log(data)) // Ausgabe：{ message: "Hello, World!" }
.catch(error => console.error('Error:', error));
Auf diese Weise kann die Kommunikation zwischen Front-End und Back-End reibungslos verlaufen, um sicherzustellen, dass die Daten im JSON-Format korrekt übertragen werden können und das Problem des Cross-Domain-Zugriffs lösen.
In diesem Artikel wird beschrieben, wie das Antwortheader-Format in PHP mit der Fetch- API des Front-Ends festgelegt wird, um sicherzustellen, dass die Antwortdaten korrekt an das Front-End übergeben werden können. Durch die Konfiguration geeigneter Antwort-Header wie Inhaltstyp und Zugriffskontroll-Allow-Origin können Sie die Richtigkeit von Cross-Domänen-Anforderungen und -Antaktionen sicherstellen. Wenn Sie Anwendungen entwickeln, die die Kommunikation mit Front- und Back-End-Kommunikation umfassen, hilft das Verständnis der Konfiguration dieser Antwortheader dazu, die Dateninteraktionen reibungslos zu vervollständigen.
