recherche

Maison >interface Web >js tutoriel >Comment résoudre le problème de perte de cookies lors de l'accès inter-domaines Ajax

Comment résoudre le problème de perte de cookies lors de l'accès inter-domaines Ajax

php中世界最好的语言
php中世界最好的语言original
2018-04-02 16:05:271785parcourir

Cette fois, je vais vous montrer comment résoudre le problème de la perte de Cookie lors de l'accès inter-domaines Ajax. Quelles sont les précautions pour résoudre le problème de perte de cookies lors de l'Ajax. accès inter-domaines ? Ce qui suit est un cas pratique.

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. J'ai écrit avant "ajax configure 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 noms de domaine de test

a.fdipzone.com comme nom de domaine client

b.fdipzone.com comme nom de domaine serveur

Code de test

setcookie.PHP pour la configuration du cookie côté serveur 

<?php
setcookie(&#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,
 'name' => $name,
 'cookie' => isset($_COOKIE['data'])? $_COOKIE['data'] : ''
);
// 指定允许其他域名访问
header('Access-Control-Allow-Origin:http://a.fdipzone.com');
// 响应类型
header('Access-Control-Allow-Methods:POST'); 
// 响应头设置
header('Access-Control-Allow-Headers:x-requested-with,content-type');
header('content-type:application/json');
echo json_encode($ret);
?>

test.html Le le client demande à la page 

<!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: 'http://b.fdipzone.com/server.php', // 跨域
   dataType: 'json',
   type: 'post',
   data: {'name':'fdipzone'},
   success:function(ret){
    if(ret['success']==true){
     alert('cookie:' + ret['cookie']);
    }
   }
  });
 })
 </script>
 </body>
</html>

d'abord d'exécuter http ://b.fdipzone.com/setcookie.php, crée un cookie 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 lors de la demande

Vous 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 est modifié 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: 'http://b.fdipzone.com/server.php', // 跨域
   xhrFields:{withCredentials: true}, // 发送凭据
   dataType: 'json',
   type: 'post',
   data: {'name':'fdipzone'},
   success:function(ret){
    if(ret['success']==true){
     alert('cookie:' + ret['cookie']);
    }
   }
  });
 })
 </script>
 </body>
</html>

server.php est modifié comme suit

<?php
$name = isset($_POST[&#39;name&#39;])? $_POST[&#39;name&#39;] : &#39;&#39;;
$ret = array(
 &#39;success&#39; => true,
 'name' => $name,
 'cookie' => isset($_COOKIE['data'])? $_COOKIE['data'] : ''
);
// 指定允许其他域名访问
header('Access-Control-Allow-Origin:http://a.fdipzone.com');
// 响应类型
header('Access-Control-Allow-Methods:POST'); 
// 响应头设置
header('Access-Control-Allow-Headers:x-requested-with,content-type');
// 是否允许请求带有验证信息
header('Access-Control-Allow-Credentials:true');
header('content-type:application/json');
echo json_encode($ret);
?>

Suivez les étapes précédentes et la requête revient

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

Obtention du cookie avec succès

3. Notes

1. Si le client définit l'attribut withCredentials sur true, mais que le serveur ne définit pas Access-Control-Allow-Credentials:true, il sera retourné lors de l'erreur de demande. 

XMLHttpRequest cannot load http://b.fdipzone.com/server.php. Credentials flag is 'true', but the 'Access-Control-Allow-Credentials' header is ''. It must be 'true' to allow credentials. Origin 'http://a.fdipzone.com' 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 '*' cannot be used in the 'Access-Control-Allow-Origin' heade

Jetons un coup d'œil à la solution au problème selon lequel COOKIE ne peut pas être apporté avec les requêtes inter-domaines Ajax

Méthode de requête ajax native :

var xhr = new XMLHttpRequest(); 
xhr.open("POST", "http://xxxx.com/demo/b/index.php", true); 
xhr.withCredentials = true; //支持跨域发送cookies
xhr.send();

Requête de méthode de publication ajax de jquery : 

 $.ajax({
    type: "POST",
    url: "http://xxx.com/api/test",
    dataType: 'jsonp',
    xhrFields: {
      withCredentials: true
    },
   crossDomain: true,
   success:function(){
  },
   error:function(){
 }
})

Paramètres côté serveur : 

header("Access-Control-Allow-Credentials: true");
header("Access-Control-Allow-Origin: http://www.xxx.com");

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Utiliser Ajax pour implémenter les fonctions d'enregistrement et de téléchargement d'avatar

Étapes détaillées pour utiliser Ajax pour implémenter la technologie de pagination (avec code )

Quelle est la différence entre async:false et async:true dans les requêtes Ajax

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：Exemple détaillé de la façon dont node.js obtient la base de données SQL ServerArticle suivant：Exemple détaillé de la façon dont node.js obtient la base de données SQL Server

Articles Liés

Voir plus