Implementieren Sie die korrekten Einstellungen von API-Reaktionsüberschriften in Front-End-Trennungsprojekten

In Projekten, die durch Front-End, Back-End getrennt sind, interagieren das Front-End (in der Regel eine einseitige Anwendung basierend auf Frameworks wie Vue, React, Angular) und dem Back-End (normalerweise ein API-Dienst basierend auf PHP, Node.js, Python usw.) durch die HTTP-Schnittstelle. Um sicherzustellen, dass API-Antworten vom Front-End korrekt behandelt werden können, vermeiden Sie Probleme mit der Domänen, sicherstellen, dass Sicherheit und Standardisierung sicherstellen. Wir müssen den HTTP-Antwortheader korrekt einrichten.

In PHP ist das am häufigsten verwendete Werkzeug die Header () -Funktion. In diesem Artikel werden spezifische Beispiele verwendet, um zu erklären, wie die Funktion Header () verwendet wird, um gemeinsame API-Antwortheader in Front-End-Trennungsprojekten festzulegen.

1. Stellen Sie den Response-Header des Inhalts ein

Die von der API zurückgegebenen Daten befinden sich im Allgemeinen im JSON-Format, sodass Sie dem Front-End und dem Kunden diesen Punkt mitteilen müssen.

 header('Content-Type: application/json; charset=utf-8');

Diese Codezeile gibt an, dass der zurückgegebene Datentyp JSON und der Zeichensatz UTF-8 ist. Das Front-End kann die Antwort basierend auf diesen Informationen korrekt analysieren.

2. Setzen Sie die Reaktionsüberschreitung des Cross-Domain (CORS)

Wenn der Strom und das Backend nicht in derselben Domäne sind, fängt der Browser die Anfrage ab. Wir müssen Cross-Domänen-Reaktionsüberschriften hinzufügen, um Front-End-Zugriff zu ermöglichen.

 header('Access-Control-Allow-Origin: https://m66.net');
header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS');
header('Access-Control-Allow-Headers: Content-Type, Authorization');

Diese Einstellungen ermöglichen Front-End-Zugriff auf die API von https://m66.net und ermöglichen angegebene Anforderungsmethoden und benutzerdefinierte Anforderungsheader. Hinweis: In Produktionsumgebungen ist es am besten, * nicht zu verwenden, sondern spezifische Domain -Namen anzugeben, um die Sicherheit zu verbessern.

3. Setzen Sie die Reaktionsüberschriften, um Cache zu verhindern

Um sicherzustellen, dass das Front-End jedes Mal die neuesten Daten erhält, kann das Caching deaktiviert werden:

 header('Cache-Control: no-store, no-cache, must-revalidate');
header('Pragma: no-cache');
header('Expires: 0');

Diese Antwort -Header benachrichtigen den Client und den Proxy -Server, den zurückgegebenen Inhalt nicht zu zwischenspeichern.

4. Rückgeben Sie den HTTP -Statuscode zurück

Manchmal müssen Sie nicht nur Daten zurückgeben, sondern auch den entsprechenden HTTP -Statuscode festlegen.

Kehren Sie beispielsweise zu 201 zurück und erstellt erfolgreich:

 http_response_code(201);

Oder verwenden Sie Header, um zu setzen:

 header('HTTP/1.1 201 Created');

Bei gemeinsamen Fehlerantworten wie 400, 401, 403, 404, 500 können Sie flexibel nach geschäftlichen Anforderungen festlegen.

5. Vollständiges Beispiel

Hier ist ein vollständiger API -Antwort -Beispielcode:

 <?php
// aufstellen JSON Antwortkopf
header('Content-Type: application/json; charset=utf-8');

// aufstellen跨域
header('Access-Control-Allow-Origin: https://m66.net');
header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS');
header('Access-Control-Allow-Headers: Content-Type, Authorization');

// Cache deaktivieren
header('Cache-Control: no-store, no-cache, must-revalidate');
header('Pragma: no-cache');
header('Expires: 0');

// zurückkehren 200 Statuscode
http_response_code(200);

// zurückkehren JSON Daten
$response = [
    'status' => 'success',
    'message' => 'API Reaktion erfolgreich',
    'data' => ['id' => 1, 'name' => '测试Daten']
];

echo json_encode($response);
?>