Maison > interface Web > js tutoriel > le corps du texte

Définissez Access-Control-Allow-Origin pour obtenir un accès inter-domaines

亚连
Libérer: 2018-05-22 17:28:37
original
4316 Les gens l'ont consulté

Cet article présente principalement le paramètre Ajax Access-Control-Allow-Origin pour obtenir un accès inter-domaines. Il est très bon et a une valeur de référence. Les amis dans le besoin peuvent s'y référer

accès inter-domaines ajax. est une ancienne méthode. Il existe de nombreuses solutions au problème. La méthode la plus couramment utilisée est la méthode JSONP. La méthode JSONP est une méthode non officielle, et cette méthode ne prend en charge que la méthode GET, qui n'est pas aussi sûre que la méthode POST.

Même si vous utilisez la méthode jsonp de jQuery et définissez le type sur POST, il deviendra automatiquement GET.

Description officielle du problème :

« script » : évalue la réponse en tant que JavaScript et la renvoie sous forme de texte brut. Désactive la mise en cache en ajoutant un paramètre de chaîne de requête, « _=. [TIMESTAMP]", à l'URL, sauf si l'option de cache est définie sur true. Remarque : Cela transformera les POST en GET pour les requêtes de domaine distant.

Si la méthode POST est utilisée dans domaines, vous pouvez créer une iframe cachée pour y parvenir, ce qui équivaut au téléchargement d'images ajax, mais ce sera plus gênant.

Par conséquent, il est relativement simple d'obtenir un accès inter-domaines en définissant Access-Control-Allow-Origin.

Par exemple : le nom de domaine du client est www.client.com et le nom de domaine demandé est www.server.com

Si vous utilisez directement ajax pour accéder, il y aura ce qui suit erreur

XMLHttpRequest ne peut pas charger http://www.server.com/server.PHP Aucun en-tête 'Access-Control-Allow-Origin' n'est présent sur la ressource demandée.Origin 'http://www. client.com' n'est donc pas autorisé à accéder.

Ajoutez

// 指定允许其他域名访问 
header('Access-Control-Allow-Origin:*'); 
// 响应类型 
header('Access-Control-Allow-Methods:POST'); 
// 响应头设置 
header('Access-Control-Allow-Headers:x-requested-with,content-type');
Copier après la connexion

à l'en-tête de réponse demandé pour obtenir un accès inter-domaines ajax POST.

Le code est le suivant :

client.html Chemin : 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>
Copier après la connexion

server.php Chemin : http://www.client.com/client.html /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); 
?>
Copier après la connexion

Access-Control-Allow-Origin :* signifie autoriser l'accès inter-domaines à partir de n'importe quel domaine nom

Si nécessaireSpécifiez un nom de domaine pour autoriser l'accès entre domaines, remplacez simplement Access-Control-Allow-Origin:* par Access-Control-Allow-Origin:Autorisé nom de domaine

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

Si vous en avez besoin définissez plusieurs noms de domaine pour autoriser l'accès, vous devez utiliser php pour le gérer ici

Par exemple, autorisez www.client.com et www.client2.com à avoir un accès inter-domaines

server.php est modifié en

<?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); 
?>
Copier après la connexion

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère qu'à l'avenir, cela sera utile à tout le monde.

Articles connexes :

Ajax implémente le chargement dynamique des données

Résoudre Spring MVC renvoie les données JSON à ajax rapport d'erreurs problème d'analyseur

Divers gestes du front-endajax interagissant avec le back-end (tutoriel graphique)

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal