Définition du format d'en-tête de réponse approprié avec l'API Fast-end Fetch

M66 2025-05-28

Dans le développement frontal, l'API Fetch est une interface très courante utilisée pour envoyer des demandes HTTP et obtenir des réponses. Pour s'assurer que le frontal et le back-end peuvent échanger correctement les données, la configuration de l'en-tête de réponse est cruciale. PHP fournit la fonction d'en-tête pour définir les en-têtes de réponse HTTP. Lorsqu'elle est utilisée avec l'API Front- end , la configuration correcte peut garantir que des problèmes tels que les formats de réponse et les demandes de domaine croisé peuvent être résolus.

1. Utilisez la fonction d'en-tête pour définir les en-têtes de réponse en php

En PHP, la fonction d'en-tête est utilisée pour envoyer des en-têtes de réponse HTTP bruts au navigateur. Habituellement, il est utilisé pour définir le type de contenu (type de contenu), le contrôle du cache, le partage de ressources inter-domaines (COR) et d'autres informations.

 <?php
// Définissez l&#39;en-tête de réponse，Déclarez le type de contenu de réponse comme JSON
header('Content-Type: application/json');

// installation CORS tête，Autoriser les demandes de noms de domaine spécifiques
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE');
header('Access-Control-Allow-Headers: Content-Type');

// Retour de simulation JSON données
$response = ['message' => 'Hello, World!'];
echo json_encode($response);
?>

Dans le code PHP ci-dessus, la fonction d'en-tête est utilisée pour définir l'en-tête de réponse, y compris la spécification du type de contenu de la réponse à être au format JSON. Définissez des règles pour l'accès inter-domaine via l'origine accès au contrôle-allow , permettant les demandes de toute source. À l'heure actuelle, le frontal peut recevoir normalement les données de réponse via l'API Fetch .

2. Envoyer des demandes en conjonction avec l'API Fetch

Dans le code frontal, nous utilisons l'API Fetch pour envoyer des demandes HTTP et obtenir la réponse. La syntaxe de base de Fetch est la suivante:

 fetch('http://m66.net/api/example.php', {
  method: 'GET', // Méthode de demande
  headers: {
    'Content-Type': 'application/json' // En-tête de demande，Spécifier l&#39;envoi JSON 格式的données
  }
})
.then(response => response.json()) // analyser la réponse JSON données
.then(data => console.log(data)) // Sortir响应données
.catch(error => console.error('Error:', error)); // Gestion des erreurs

Le code ci-dessus envoie une demande GET au backend PHP, spécifiant que le type de contenu dans l'en-tête de demande est Application / JSON , indiquant que le frontend souhaite recevoir des données de réponse au format JSON.

3. Résoudre des problèmes de domaine croisé

Lorsque la fin actuelle et le backend ne sont pas sur le même nom ou port de domaine, vous rencontrez généralement des problèmes de demande de domaine croisé. Pour que l'API Fetch gère correctement les demandes du domaine croisé, le backend doit ajouter des paramètres connexes CORS (Cross-Domain Resource Partage) dans l'en-tête de réponse.

En PHP, nous pouvons définir des en-têtes CORS tels que l'origine access-contrôle-allow via la fonction d'en-tête pour permettre l'accès inter-domaine. Par exemple:

 // Autoriser les demandes de domaine transversal de toutes les sources
header('Access-Control-Allow-Origin: *');
// 允许Méthode de demande GET、POST、PUT、DELETE
header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE');
// 允许En-tête de demande中包含 Content-Type
header('Access-Control-Allow-Headers: Content-Type');

Ces paramètres garantissent que la demande de récupération frontale peut être envoyée avec succès et récupérer les données sans être bloquée par le navigateur.

4. Exemple complet

En combinant le code frontal et back-end, nous pouvons obtenir un exemple complet montrant comment définir correctement le format d'en-tête de réponse à l'aide de la fonction d'en-tête de PHP avec l'API Fetch Fetch .

Code PHP:

 <?php
// Définissez l&#39;en-tête de réponse
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');

// Retour de simulation JSON données
$response = ['message' => 'Hello, World!'];
echo json_encode($response);
?>

Code javascript:

 fetch('http://m66.net/api/example.php', {
  method: 'GET',
  headers: {
    'Content-Type': 'application/json'
  }
})
.then(response => response.json())
.then(data => console.log(data)) // Sortir：{ message: "Hello, World!" }
.catch(error => console.error('Error:', error));

De cette façon, la communication entre le front-end et le back-end peut se dérouler en douceur, garantir que les données peuvent être transmises correctement au format JSON et résoudre le problème de l'accès au domaine croisé.

Résumer

Cet article décrit comment définir le format d'en-tête de réponse dans PHP avec l' API Fetch de la fin frontale pour s'assurer que les données de réponse peuvent être correctement transmises à l'avant. En configurant les en-têtes de réponse appropriés tels que le type de contenu et l'origine de contrôle d'accès à l'allow , vous pouvez assurer l'exactitude des demandes et des réponses croisées. Si vous développez des applications impliquant des communications frontales et back-end, comprendre comment configurer ces en-têtes de réponse aidera à terminer les interactions de données en douceur.

header

Connexe