Solution au problème de perte de cookies dans l'accès inter-domaines Ajax

Solution au problème de perte de cookies dans l'accès inter-domaines Ajax_AJAX lié

小云云

Libérer： 2023-03-19 11:24:01

original

2478 Les gens l'ont consulté

Cet 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-domaines, vous pouvez vous référer à l'article que j'ai écrit. avant l'article "Ajax settings Access-Control" -Allow-Origin to get cross-domain access" présente principalement la solution au problème de perte de cookies dans l'accès inter-domaines Ajax. Les amis dans le besoin peuvent s'y référer. J'espère que cela pourra aider tout le monde.

Accès inter-domaines 1.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 du serveur

Code de test

setcookie.PHP est utilisé pour définir le cookie du serveur

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

Copier après la connexion

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);
?>

Copier après la connexion

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: '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>

Copier après la connexion

Exécutez d'abord http://b.fdipzone.com/setcookie.php pour créer un cookie côté serveur .

Ensuite, exécutez http://a.fdipzone.com/test.html

Sortie

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

Copier après la connexion

Échec de l'obtention du cookie.

2. Solution

Client

Définissez l'attribut withCredentials sur true lors de la demande

afin que vous puissiez spécifier qu'une certaine demande doit envoyer des informations d'identification. Si le serveur reçoit une demande avec des informations d'identification, il répondra avec les en-têtes HTTP suivants.

Côté serveur

Définir l'en-tête

header("Access-Control-Allow-Credentials:true");

Copier après la connexion

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>

Copier après la connexion

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);
?>

Copier après la connexion

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

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

Copier après la connexion

Obtention du cookie avec succès

3. Précautions

1. Si le client définit l'attribut withCredentials sur true, mais que le serveur ne définit pas Access-Control-Allow-Credentials:true, une erreur sera renvoyée lors de la requête.

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.

Copier après la connexion

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

Copier après la connexion

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();

Copier après la connexion

Demande 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(){
 }
})

Copier après la connexion

Paramètres côté serveur :

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

Copier après la connexion

Recommandations associées :

JS implémente la réponse du flacon de requête inter-domaines Ajax content

La solution parfaite pour les requêtes inter-domaines Ajax que COOKIE ne peut pas apporter

Exemples détaillés des principes des requêtes inter-domaines 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!