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中世界最好的语言
Freigeben: 2018-04-02 16:05:27
Original
1821 Leute haben es durchsucht

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);
?>
Nach dem Login kopieren

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);
?>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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":""}
Nach dem Login kopieren

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

{"success":true,"name":"fdipzone","cookie":"1484558863"}
Nach dem Login kopieren
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.
Nach dem Login kopieren
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
Nach dem Login kopieren

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();
Nach dem Login kopieren

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(){
 }
})
Nach dem Login kopieren

Serverseitige Einstellungen:

header("Access-Control-Allow-Credentials: true");
header("Access-Control-Allow-Origin: http://www.xxx.com");
Nach dem Login kopieren
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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage