Compréhension approfondie du cross-domain CORS (exemple de code)

Ce que cet article vous apporte, c'est une compréhension approfondie du cross-domain CORS (exemples de code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Lorsqu'on les interroge sur l'interaction des données lors des entretiens, ils demandent souvent comment gérer les problèmes inter-domaines. La plupart des gens répondront à JSONP, puis l'intervieweur demandera : « Quelles sont les lacunes de JSONP ? dois-je faire si j'envoie une demande ? Les intervieweurs disposant d'une base solide diront que l'utilisation de CORS est inter-domaines, tandis que ceux qui n'ont pas de base solide risquent de secouer la tête.

Ce n'est pas encore fini. Si l'entreprise est plus formelle ou se soucie des compétences techniques, et que vous passez un entretien pour un poste important et que les RH veulent réduire votre salaire, elles compenseront. les problèmes avec le cross-domain CORS ? Pour le moment, peu de gens peuvent répondre. Même si vous répondez que la compatibilité n'est pas bonne et que vous avez besoin du navigateur IE10+, l'autre partie aura toujours quelque chose à dire, alors comment gérer la compatibilité ? Les candidats n'auront rien à dire, sinon ils décéderont. Même s'ils restent, ils n'auront aucune confiance lors des négociations salariales.

CORS cross-domain est vraiment un outil puissant que l'intervieweur peut passer seul.

Pourquoi cela se produit-il ?

1. Il n'y a pas beaucoup de requêtes CORS qui utilisent rarement ce scénario, et la plupart d'entre elles sont gérées par JSONP.

2. Les compétences des développeurs ne sont pas solides, ils ont une attitude paresseuse et ils n'ont généralement aucune conscience ni volonté d'améliorer leur niveau technique.

3. Il existe peu de matériel d'apprentissage pertinent et il est difficile pour les purs novices du front-end de créer un environnement testable.

Face à cet obstacle, nous allons le résoudre complètement aujourd'hui, pour qu'il ne soit plus notre faiblesse, mais un point fort qui démontre notre force technique.

Tout d'abord, qu'est-ce que CORS ?

CORS est une norme du W3C, le nom complet est "Cross -domain Resource Sharing" (Partage de ressources d'origine croisée).
Il permet au navigateur d'émettre des requêtes XMLHttpRequest vers des serveurs d'origine croisée, surmontant ainsi la limitation selon laquelle AJAX ne peut être utilisé qu'à partir de la même origine.

Avantages et inconvénients

Avantages :

1 Prend en charge POST et toutes les requêtes HTTP
2 Sécurité supérieure à JSOP
3. . Il y a relativement peu de choses à faire sur le front-end

Inconvénients :

1 Non compatible avec les navigateurs plus anciens, tels que IE9 et inférieurs
2. > 3. C'est un peu compliqué à utiliser

Comment l'utiliser ?

Partie frontale :

nbsp;html>


    <meta>
    <meta>
    <meta>
    <title>CORS跨域请求</title>
    <script>
        function createCORSRequest(method, url) {
            var xhr = new XMLHttpRequest();
            if ("withCredentials" in xhr) {
                xhr.open(method, url, true);
            } else if (typeof XDomainRequest != "undefined") {
                xhr = new XDomainRequest();
                xhr.open(method, url);
            } else {
                xhr = null;
            }
            return xhr;
        }

        window.onload = function () {
            var oBtn = document.getElementById(&#39;btn1&#39;);
            oBtn.onclick = function () {
                var xhr = createCORSRequest("get", "http://wpdic.com/cors.php");
                if (xhr) {
                    xhr.onload = function () {
                        var json = JSON.parse(xhr.responseText);
                        alert(json.a);
                    };
                    xhr.onerror = function () {
                        alert(&#39;请求失败.&#39;);
                    };
                    xhr.send();
                }
            };
        };
    </script>


    <input>

Remarques :

1 Le code ci-dessus est compatible avec IE8 car il utilise XDomainRequest

2. d'autres codes, vous pouvez l'utiliser comme XMLHttpRequset, ne pensez pas à 2.0 ou pas 2.0

3 Si vous souhaitez publier des données, vous pouvez le faire dans xhr.send()

. 4. Il n'est pas recommandé d'étudier la « méthode simple » ici « Tant que vous comprenez le code et pouvez l'utiliser, il n'est pas trop tard pour vérifier à nouveau si vous rencontrez des problèmes

Partie backend :

<?php header(&#39;content-type:application:json;charset=utf8&#39;);
header(&#39;Access-Control-Allow-Origin:*&#39;);
header(&#39;Access-Control-Allow-Methods:GET,POST&#39;);
header(&#39;Access-Control-Allow-Credentials: true&#39;);
header(&#39;Access-Control-Allow-Headers:x-requested-with,content-type&#39;);
$str = &#39;{"a":1,"b":2,"c":3,"d":4,"e":5}&#39;; 
echo $str;
?>

Remarques :

1.Access-Control-Allow-Origin :

signifie que tout nom de domaine est autorisé pour l'accès entre domaines si vous devez spécifier un nom de domaine à autoriser. accès inter-domaines, remplacez simplement Access-Control-Allow-Origin: par Access-Control-Allow-Origin : Noms de domaine autorisés, cela devrait également être fait dans le travail réel. 2. Access-Control-Allow-Methods : GET, POST stipule les méthodes autorisées. Il est recommandé que le contrôle soit plus strict et ne lâchez pas les autorisations telles que DELETE à volonté

2.Access-Control-Allow-Credentials

Ceci. le champ est facultatif. Sa valeur est une valeur booléenne indiquant s'il faut autoriser l'envoi de cookies. Par défaut, les cookies ne sont pas inclus dans les requêtes CORS. Défini sur true, ce qui signifie que le serveur autorise explicitement que le cookie soit inclus dans la requête et envoyé au serveur. Cette valeur ne peut être définie que sur true. Si le serveur ne souhaite pas que le navigateur envoie des cookies, supprimez simplement ce champ.

Enfin, questions courantes d'entretien :

Quelles sont les différences entre les scénarios d'application de CORS et de JSONP ?

CORS nécessite une prise en charge simultanée du navigateur (>IE10) et du serveur. Il s'agit d'une solution interdomaine fondamentale et est automatiquement complétée par le navigateur. L'avantage est qu'il est plus puissant et prend en charge diverses méthodes HTTP. L'inconvénient est que la compatibilité n'est pas aussi bonne que JSONP.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!