Heim > Web-Frontend > js-Tutorial > Hauptteil

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

亚连
Freigeben: 2018-05-22 17:28:37
Original
4239 Leute haben es durchsucht

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('Access-Control-Allow-Origin:*'); 
// 响应类型 
header('Access-Control-Allow-Methods:POST'); 
// 响应头设置 
header('Access-Control-Allow-Headers:x-requested-with,content-type');
Nach dem Login kopieren

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

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

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

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!

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
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!