CORS ou la Gestion des Requêtes Cross-Origin

fetch('https://api.example.org/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Erreur:', error));

function envoyerRequeteJsonp() {
    var scriptDynamique = document.createElement('script');

    // Définir les paramètres à envoyer
    var methodeRetour= 'traiterReponse';
    var param1 = 'value1';
    var param2 = 'value2';

    // Construire l'URL avec les paramètres
    scriptDynamique.src = `https://serveur.com/reponse.php?callback=${methodeRetour}&param1=${param1}&param2=${param2}`;

    // Ajouter le script au document pour envoyer la requête
    document.body.appendChild(scriptDynamique);
}

// Envoyer la requête JSONP lorsque la page se charge
window.onload = envoyerRequeteJsonp;

<?php
    header('Content-Type: application/javascript');

    // Récupérer le nom du callback
    $gestionCallback = $_GET['callback'];
    // le paramètre transmis <strong>callback </strong>peut être nommé différemment

    // Récupérer les paramètres supplémentaires
    $param1 = isset($_GET['param1']) ? $_GET['param1'] : 'default1';
    $param2 = isset($_GET['param2']) ? $_GET['param2'] : 'default2';

    // Créer les données de réponse en fonction des paramètres reçus
    $data = array(
        'message' => 'Voici une réponse employant JSONP!',
        'param1_recu' => $param1,
        'param2_recu' => $param2
    );

    // Retourner la réponse JSONP avec le callback
    echo $gestionCallback . '(' . json_encode($data) . ');';
?>

function traiterReponse(data) {
    console.log("Données reçues :", data);
    document.body.innerHTML += `<p>Message : ${data.message}</p>`;
    document.body.innerHTML += `<p>Paramètre 1 reçu : ${data.param1_recu}</p>`;
    document.body.innerHTML += `<p>Paramètre 2 reçu : ${data.param2_recu}</p>`;
}
function envoyerRequeteJsonp() {
    $.ajax({
        url: 'https://your-external-server.com/your_php_script.php', // Remplacez par l'URL de votre serveur
            dataType: 'jsonp', // Indiquez que vous attendez une réponse JSONP
            data: {
                // Vous pouvez ajouter des paramètres supplémentaires ici
                param1: 'valeur1',
                param2: 'valeur2'
            },
            jsonp: 'gestionCallback', // Nom du paramètre pour le callback JSONP
            success: traiterReponse, // Fonction de rappel pour traiter la réponse
            error: function(jqXHR, textStatus, errorThrown) {
                console.error('Erreur lors de la requête JSONP:', textStatus, errorThrown);
            }
        });
}
header("Access-Control-Allow-Origin: *");
Access-Control-Allow-Origin: https://mon-app.example.com
header("Access-Control-Allow-Origin: https://example.com");

// Indique les méthodes HTTP autorisées
header("Access-Control-Allow-Methods: GET, POST");

// Indique les en-têtes personnalisés autorisés
header("Access-Control-Allow-Headers: Content-Type");

// Spécifie le type de contenu de la réponse
header('Content-Type: application/json');
<?php
    header("Access-Control-Allow-Origin: *");
    header("Content-Type: application/json");

    // Exemple de données JSON
    $data = array("nom" => "Jean Dupont", "email" => "jean.dupont@example.com");
    echo json_encode($data);
?>
<?php
    // Spécifiez l'origine autorisée (peut être un domaine spécifique ou * pour tous les domaines)
    header("Access-Control-Allow-Origin: https://mon-app.example.com");

    // Spécifiez les méthodes HTTP autorisées (GET, POST, PUT, DELETE, etc.)
    header("Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS");

    // Spécifiez les en-têtes personnalisés autorisés dans la requête
    header("Access-Control-Allow-Headers: Content-Type, Authorization, X-Requested-With");

    // Indique si les réponses peuvent être mises en cache et pendant combien de temps
    header("Access-Control-Max-Age: 3600"); // en secondes

    // Réponse à une requête OPTIONS (preflight) pour vérifier les en-têtes et les méthodes
    if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
        // Ajoutez d'autres en-têtes si nécessaire pour les preflights*
        header("Access-Control-Allow-Headers: Content-Type, Authorization, X-Requested-With");
        exit;
    }

    // Le reste de votre code pour gérer les requêtes GET, POST, etc.
    $data = array('message' => 'CORS configuration complete.');
    echo json_encode($data);
?>

# Autoriser les requêtes depuis des domaines spécifiques
# Remplacez les domaines ci-dessous par ceux qui doivent être autorisés
Header set Access-Control-Allow-Origin "https://example.com"
Header set Access-Control-Allow-Origin "https://another-example.com"

# Il est possible d'utiliser plusieurs en-têtes Access-Control-Allow-Origin
# en ajoutant des directives Header supplémentaires pour chaque domaine,
# mais chaque en-tête sera limité à un seul domaine.

# Autoriser les méthodes HTTP spécifiques
Header set Access-Control-Allow-Methods "GET, POST, OPTIONS, PUT, DELETE"

# Autoriser les en-têtes personnalisés
Header set Access-Control-Allow-Headers "Content-Type, Authorization, X-Requested-With"

# Gérer les requêtes preflight
<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %{REQUEST_METHOD} OPTIONS
    RewriteRule ^(.*)$ $1 [R=200,L]
</IfModule>

CORS ou la Gestion des Requêtes Cross-Origin

Le Contexte des Requêtes Cross-Origin

Les Contraintes des Navigateurs et CORS

Solutions pour Contourner les Restrictions CORS

1 – Utilisation de JSONP en vanilla script

2 – Utilisation de JSONP avec jQuery

3 – Mise en Place de CORS avec Headers Access-Control-Allow-Origin

4 – Configuration des Headers CORS avec PHP

5 – Configuration des Headers CORS via .htaccess

Conclusion

Laisser un commentaire Annuler la réponse

3 – Mise en Place de CORS avec Headers `Access-Control-Allow-Origin`

5 – Configuration des Headers CORS via `.htaccess`