Heim > Artikel > Web-Frontend > Legen Sie Access-Control-Allow-Origin fest, um domänenübergreifenden Zugriff zu erreichen

Legen Sie Access-Control-Allow-Origin fest, um domänenübergreifenden Zugriff zu erreichen

亚连Original: 2018-05-22 17:28:374304Durchsuche

Dieser Artikel stellt hauptsächlich die Ajax-Einstellung Access-Control-Allow-Origin vor, um einen domänenübergreifenden Zugriff zu erreichen. Er ist sehr gut und hat Referenzwert.

Ajax-übergreifender Domänenzugriff ist eine alte Methode. Es gibt viele Lösungen für das Problem. Die JSONP-Methode ist eine inoffizielle Methode und diese Methode unterstützt nur die GET-Methode, die nicht so sicher ist wie die POST-Methode.

Auch wenn Sie die JSONP-Methode von jQuery verwenden und den Typ auf POST setzen, ändert er sich automatisch in GET.

Offizielle Problembeschreibung:

„script“: Wertet die Antwort als JavaScript aus und gibt sie als Klartext zurück, indem der Abfragezeichenfolgenparameter „_=“ angehängt wird [TIMESTAMP]“, an die URL, es sei denn, die Cache-Option ist auf „true“ gesetzt. Hinweis: Dadurch werden POSTs in GETs für Remote-Domain-Anfragen umgewandelt.

Wenn die POST-Methode übergreifend verwendet wird domains, Sie können einen versteckten IFrame erstellen, um dies zu erreichen. Dies entspricht dem Hochladen von Bildern über Ajax, ist jedoch problematischer.

Daher ist es relativ einfach, einen domänenübergreifenden Zugriff zu erreichen, indem Sie Access-Control-Allow-Origin festlegen.

Zum Beispiel: Der Domänenname des Clients lautet www.client.com und der angeforderte Domänenname lautet www.server.com

Wenn Sie direkt über Ajax zugreifen, wird Folgendes angezeigt Fehler

XMLHttpRequest kann http://www.server.com/server.PHP nicht laden. Auf der angeforderten Ressource ist kein „Access-Control-Allow-Origin“-Header vorhanden.Origin „http://www. „client.com“ ist daher kein Zugriff gestattet.

Fügen Sie

// 指定允许其他域名访问 
header(&#39;Access-Control-Allow-Origin:*&#39;); 
// 响应类型 
header(&#39;Access-Control-Allow-Methods:POST&#39;); 
// 响应头设置 
header(&#39;Access-Control-Allow-Headers:x-requested-with,content-type&#39;);

zum angeforderten Antwortheader hinzu, um einen domänenübergreifenden Ajax-POST-Zugriff zu erreichen.

Der Code lautet wie folgt:

client.html Pfad: http://www.client.com/client.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<html> 
 <head> 
 <meta http-equiv="content-type" content="text/html;charset=utf-8"> 
 <title> 跨域测试 </title> 
 <script src="//code.jquery.com/jquery-1.11.3.min.js"></script> 
 </head> 
 <body> 
 <p id="show"></p> 
 <script type="text/javascript"> 
 $.post("http://www.server.com/server.php",{name:"fdipzone",gender:"male"}) 
 .done(function(data){ 
 document.getElementById("show").innerHTML = data.name + &#39; &#39; + data.gender; 
 }); 
 </script> 
 </body> 
</html>

server.php Pfad: http: //www .server.com/server.php

<?php 
$ret = array( 
 &#39;name&#39; => isset($_POST[&#39;name&#39;])? $_POST[&#39;name&#39;] : &#39;&#39;, 
 &#39;gender&#39; => isset($_POST[&#39;gender&#39;])? $_POST[&#39;gender&#39;] : &#39;&#39; 
); 
header(&#39;content-type:application:json;charset=utf8&#39;); 
header(&#39;Access-Control-Allow-Origin:*&#39;); 
header(&#39;Access-Control-Allow-Methods:POST&#39;); 
header(&#39;Access-Control-Allow-Headers:x-requested-with,content-type&#39;); 
echo json_encode($ret); 
?>

Access-Control-Allow-Origin:* bedeutet, den domänenübergreifenden Zugriff von jedem Domänennamen aus zuzulassen

Bei Bedarf Geben Sie einen Domänennamen an, um ihn zuzulassen. Für domänenübergreifenden Zugriff ändern Sie einfach Access-Control-Allow-Origin:* in Access-Control-Allow-Origin:Zulässige Domänennamen

Zum Beispiel: header('Access-Control- Allow-Origin: http://www.client.com');

Wenn Sie mehrere Domänennamen festlegen müssen, um den Zugriff zu ermöglichen , Sie müssen PHP verwenden, um hier damit umzugehen

Erlauben Sie beispielsweise www.client.com und www.client2.com domänenübergreifenden Zugriff

server.php und ändern Sie es in

<?php 
$ret = array( 
 &#39;name&#39; => isset($_POST[&#39;name&#39;])? $_POST[&#39;name&#39;] : &#39;&#39;, 
 &#39;gender&#39; => isset($_POST[&#39;gender&#39;])? $_POST[&#39;gender&#39;] : &#39;&#39; 
); 
header(&#39;content-type:application:json;charset=utf8&#39;); 
$origin = isset($_SERVER[&#39;HTTP_ORIGIN&#39;])? $_SERVER[&#39;HTTP_ORIGIN&#39;] : &#39;&#39;; 
$allow_origin = array( 
 &#39;http://www.client.com&#39;, 
 &#39;http://www.client2.com&#39; 
); 
if(in_array($origin, $allow_origin)){ 
 header(&#39;Access-Control-Allow-Origin:&#39;.$origin); 
 header(&#39;Access-Control-Allow-Methods:POST&#39;); 
 header(&#39;Access-Control-Allow-Headers:x-requested-with,content-type&#39;); 
} 
echo json_encode($ret); 
?>

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Ajax implementiert dynamisches Laden von Daten

Solve Spring MVC gibt JSON-Daten an Ajax zurück Fehler beim Melden eines Parserfehlerproblems

Verschiedene Gesten des FrontendsAjaxInteraktion mit dem Backend (grafisches Tutorial)

Das obige ist der detaillierte Inhalt vonLegen Sie Access-Control-Allow-Origin fest, um domänenübergreifenden Zugriff zu erreichen. 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：Ajax implementiert die Funktion, einen Avatar zu registrieren, auszuwählen und anschließend hochzuladenNächster Artikel：Ajax implementiert die Funktion, einen Avatar zu registrieren, auszuwählen und anschließend hochzuladen

In Verbindung stehende Artikel

Mehr sehen