recherche

Maison  >  Article  >  interface Web  >  Une explication de la solution à la perte de cookies dans l'accès inter-domaines ajax

Une explication de la solution à la perte de cookies dans l'accès inter-domaines ajax

jacklove
jackloveoriginal
2018-06-08 17:58:402052parcourir

L'accès inter-domaines Ajax peut être obtenu en utilisant la méthode jsonp ou en définissant Access-Control-Allow-Origin. Concernant la configuration d'Access-Control-Allow-Origin pour obtenir un accès inter-domaine, vous pouvez vous référer à l'article que j'ai écrit auparavant. "Paramètre ajax Access-Control- Allow-Origin pour obtenir un accès inter-domaines》

1.accès inter-domaines ajax, perte de cookies

Créez d'abord deux domaines de test nomme
a.fdipzone .com comme nom de domaine client
b.fdipzone.com comme nom de domaine serveur

Code de test

setcookie.php est utilisé pour définir les cookies du serveur

<?phpsetcookie(&#39;data&#39;, time(), time()+3600);?>

server.php est utilisé pour être demandé par le client

<?php$name = isset($_POST[&#39;name&#39;])? $_POST[&#39;name&#39;] : &#39;&#39;;$ret = array(    &#39;success&#39; => true,    &#39;name&#39; => $name,    &#39;cookie&#39; => isset($_COOKIE[&#39;data&#39;])? $_COOKIE[&#39;data&#39;] : &#39;&#39;);// 指定允许其他域名访问header(&#39;Access-Control-Allow-Origin:http://a.fdipzone.com&#39;);// 响应类型header(&#39;Access-Control-Allow-Methods:POST&#39;);  

// 响应头设置header(&#39;Access-Control-Allow-Headers:x-requested-with,content-type&#39;);

header(&#39;content-type:application/json&#39;);echo json_encode($ret);?>

test.html Page de demande du client

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>
 <head>
  <meta http-equiv="content-type" content="text/html;charset=utf-8">
  <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
  <title> ajax 跨域访问cookie丢失的解决方法 </title>
 </head>

 <body>
    <script type="text/javascript">
    $(function(){

        $.ajax({
            url: &#39;http://b.fdipzone.com/server.php&#39;, // 跨域
            dataType: &#39;json&#39;,
            type: &#39;post&#39;,
            data: {&#39;name&#39;:&#39;fdipzone&#39;},
            success:function(ret){
                if(ret[&#39;success&#39;]==true){
                    alert(&#39;cookie:&#39; + ret[&#39;cookie&#39;]);
                }
            }
        });

    })    </script>

 </body></html>

Première exécution de http : //b.fdipzone.com/setcookie.php, crée des cookies côté serveur.
Ensuite, exécutez http://a.fdipzone.com/test.html

Sortie

{"success":true,"name":"fdipzone","cookie":""}

Échec de l'obtention du cookie.

2. Solution

Client
Définissez l'attribut withCredentials sur true permet de spécifier que les informations d'identification doivent être envoyées pour une certaine demande. Si le serveur reçoit une demande avec des informations d'identification, il répondra avec les en-têtes HTTP suivants.

Serveur Définir l'en-tête

header("Access-Control-Allow-Credentials:true");
Autoriser les requêtes avec informations de vérification


test.html Modifiez comme suit 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>
 <head>
  <meta http-equiv="content-type" content="text/html;charset=utf-8">
  <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
  <title> ajax 跨域访问cookie丢失的解决方法 </title>
 </head>

 <body>
    <script type="text/javascript">
    $(function(){

        $.ajax({
            url: &#39;http://b.fdipzone.com/server.php&#39;, // 跨域
            xhrFields:{withCredentials: true}, // 发送凭据
            dataType: &#39;json&#39;,
            type: &#39;post&#39;,
            data: {&#39;name&#39;:&#39;fdipzone&#39;},
            success:function(ret){
                if(ret[&#39;success&#39;]==true){
                    alert(&#39;cookie:&#39; + ret[&#39;cookie&#39;]);
                }
            }
        });

    })    </script>

 </body></html>

server.php Modifiez comme suit 

<?php$name = isset($_POST[&#39;name&#39;])? $_POST[&#39;name&#39;] : &#39;&#39;;$ret = array(    &#39;success&#39; => true,    &#39;name&#39; => $name,    &#39;cookie&#39; => isset($_COOKIE[&#39;data&#39;])? $_COOKIE[&#39;data&#39;] : &#39;&#39;);// 指定允许其他域名访问header(&#39;Access-Control-Allow-Origin:http://a.fdipzone.com&#39;);// 响应类型header(&#39;Access-Control-Allow-Methods:POST&#39;);  

// 响应头设置header(&#39;Access-Control-Allow-Headers:x-requested-with,content-type&#39;);// 是否允许请求带有验证信息header(&#39;Access-Control-Allow-Credentials:true&#39;);

header(&#39;content-type:application/json&#39;);echo json_encode($ret);?>
Suivez les étapes précédentes et la requête reviendra 

{"success":true,"name":"fdipzone","cookie":"1484558863"}
Obtention réussie du cookie


3. Notes

1 Si le client définit l'attribut withCredentials sur true, mais que le serveur le fait. not Set Access-Control-Allow-Credentials:true et une erreur sera renvoyée lors de la demande. 

XMLHttpRequest cannot load http://b.fdipzone.com/server.php. Credentials flag is &#39;true&#39;, but the &#39;Access-Control-Allow-Credentials&#39; header is &#39;&#39;. It must be &#39;true&#39; to allow credentials. Origin &#39;http://a.fdipzone.com&#39; is therefore not allowed access.
2. Une fois que l'en-tête du serveur a défini Access-Control-Allow-Credentials : true, Access-Control-Allow-Origin ne peut pas être défini sur * et doit être défini sur un nom de domaine, sinon une erreur sera restitué. 

XMLHttpRequest cannot load http://b.fdipzone.com/server.php. A wildcard &#39;*&#39; cannot be used in the &#39;Access-Control-Allow-Origin&#39; header when the credentials flag is true. Origin &#39;http://a.fdipzone.com&#39; is therefore not allowed access. The credentials mode of an XMLHttpRequest is controlled by the withCredentials attribute.
Cet article explique la solution à la perte de cookies dans l'accès inter-domaines ajax. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois.

Recommandations associées :

Explication sur la méthode de calcul de key_len dans mysql expliquer

Comment utiliser curl pour simuler ip et accédez à la source

Convertissez les données NULL via la méthode MySQL

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!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Principe de liaison de données bidirectionnelle AngularJS (tutoriel détaillé)Article suivant：Principe de liaison de données bidirectionnelle AngularJS (tutoriel détaillé)

Articles Liés

Voir plus