suchen

Heim >Web-Frontend >js-Tutorial >So lösen Sie das Problem des Cookie-Verlusts beim domänenübergreifenden Ajax-Zugriff

So lösen Sie das Problem des Cookie-Verlusts beim domänenübergreifenden Ajax-Zugriff

php中世界最好的语言
php中世界最好的语言Original
2018-04-02 16:05:271784Durchsuche

Dieses Mal zeige ich Ihnen, wie Sie das Problem des Cookie-Verlusts während des domänenübergreifenden Ajax-Zugriffs lösen können. Welche Vorsichtsmaßnahmen gibt es, um das Problem des Cookie-Verlusts während des Ajax-Zugriffs zu lösen? Domänenübergreifender Zugriff? Das Folgende ist ein praktischer Fall.

Der domänenübergreifende Ajax-Zugriff kann mithilfe der JSONP-Methode oder der Einstellung Access-Control-Allow-Origin erreicht werden, um domänenübergreifenden Zugriff zu erreichen Ich habe vor „Ajax-Zugriff einrichten“ -Control-Allow-Origin geschrieben, um domänenübergreifenden Zugriff zu erreichen》

1.ajax domänenübergreifender Zugriff, Cookie-Verlust

Erstellen Sie zunächst zwei Testdomänennamen

a.fdipzone.com als Client-Domänennamen

b.fdipzone.com als Server-Domänennamen

Testcode

setcookie.PHP zum Setzen serverseitiger Cookies 

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

server.php wird zur Anforderung durch den 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 verwendet Client fordert die Seite an 

<!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>

führt zuerst http ://b.fdipzone.com/setcookie.php aus und erstellt ein serverseitiges Cookie.

Dann http://a.fdipzone.com/test.html ausführen

Ausgabe

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

Cookie konnte nicht abgerufen werden.

2. Lösung

Client

Setzen Sie das withCredentials-Attribut auf true, wenn Sie

Ermöglicht Ihnen festzulegen, dass Anmeldeinformationen für eine bestimmte Anfrage gesendet werden sollen. Wenn der Server eine Anfrage mit Anmeldeinformationen erhält, antwortet er mit den folgenden HTTP-Headern.

Server

Header festlegen

header("Access-Control-Allow-Credentials:true");
Anfragen mit Verifizierungsinformationen zulassen

test.html wird wie folgt geändert

<!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 wird wie folgt geändert

<?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);
?>
Folgen Sie den vorherigen Schritten und die Anfrage wird zurückgegeben

{"success":true,"name":"fdipzone","cookie":"1484558863"}
Das Cookie wurde erfolgreich abgerufen

3. Hinweise

1. Wenn der Client das Attribut „withCredentials“ auf „true“ setzt, der Server „Access-Control-Allow-Credentials:true“ jedoch nicht wird während der Anfrage zurückgegeben. 

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. Nachdem der Server-Header Access-Control-Allow-Credentials: true gesetzt hat, kann Access-Control-Allow-Origin nicht auf * gesetzt werden und muss auf einen Domänennamen gesetzt werden, andernfalls ein Fehler wird zurückgegeben. 

XMLHttpRequest cannot load http://b.fdipzone.com/server.php. A wildcard '*' cannot be used in the 'Access-Control-Allow-Origin' heade

Sehen wir uns die Lösung für das Problem an, dass COOKIE nicht mit domänenübergreifenden Ajax-Anfragen eingebracht werden kann

Native Ajax-Anfragemethode:

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

Anfrage der Ajax-Post-Methode von jquery: 

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

Serverseitige Einstellungen: 

header("Access-Control-Allow-Credentials: true");
header("Access-Control-Allow-Origin: http://www.xxx.com");
Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Verwendung von Ajax zur Implementierung von Registrierungs- und Avatar-Upload-Funktionen

Detaillierte Schritte zur Verwendung von Ajax zur Implementierung der Paging-Technologie (mit Code)

Was ist der Unterschied zwischen async:false und async:true in Ajax-Anfragen

Das obige ist der detaillierte Inhalt vonSo lösen Sie das Problem des Cookie-Verlusts beim domänenübergreifenden Ajax-Zugriff. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Detailliertes Beispiel dafür, wie node.js die SQL Server-Datenbank erhältNächster Artikel：Detailliertes Beispiel dafür, wie node.js die SQL Server-Datenbank erhält

In Verbindung stehende Artikel

Mehr sehen