Comment résoudre le problème selon lequel les images thinkphp ne sont pas affichées sur tous les domaines

Récemment, j'ai rencontré des problèmes étranges lors du développement de projets utilisant le framework ThinkPHP. Notre projet est un site Web d'affichage d'images, mais dans le navigateur, certaines images ne seront pas affichées et il n'y a pas de message d'erreur dans la console. Grâce à des recherches et à des expérimentations, nous avons finalement découvert qu'il s'agissait d'un problème causé par plusieurs domaines. Dans cet article, je partagerai notre processus pour identifier les problèmes et les résoudre.

Tout d’abord, comprenons ce qu’est le cross-domain. Le cross-domain se produit entre deux sites Web avec des noms de domaine différents. Lorsque les ressources d'un site Web, telles que JS, CSS, Ajax ou images, demandent à accéder aux ressources d'un autre site Web, elles sont bloquées en raison des restrictions de celui-ci. politique d’origine. La politique de même origine est une fonctionnalité de sécurité très importante. Elle restreint un site Web à accéder uniquement aux ressources ayant le même nom de domaine, le même protocole et le même port que le sien.

Dans notre projet, nous utilisons une bibliothèque tierce pour charger des images, et cette bibliothèque utilise des adresses avec différents noms de domaine pour stocker les images. Par conséquent, dans le navigateur, l’image ne peut pas s’afficher correctement lorsqu’elle traverse un domaine.

Pour résoudre ce problème, nous devons effectuer quelques réglages côté serveur. La solution la plus courante consiste à mettre en place CORS (Cross-Origin Resource Sharing) côté serveur. CORS permet au serveur de spécifier quels noms de domaine peuvent accéder à la ressource lorsqu'il répond aux demandes des clients.

Dans le framework ThinkPHP, nous pouvons implémenter CORS en ajoutant le code suivant dans le fichier index.php :

header('Access-Control-Allow-Origin:*'); //允许所有来源访问
header('Access-Control-Allow-Method:POST,GET'); //允许访问的方式

Ce code permet à toutes les sources d'accéder aux ressources, et permet l'accès POST et GET.

La chose importante à noter ici est que ce code doit être placé en haut de index.php afin que toutes les requêtes puissent utiliser ce paramètre.

En plus de configurer CORS, nous pouvons également utiliser d'autres méthodes pour résoudre les problèmes inter-domaines. Par exemple, JSONP (JSON with Padding) est une méthode réalisable pour résoudre les problèmes inter-domaines. En ajoutant une balise de script à la page, les données auxquelles il faut accéder sont regroupées dans une fonction, puis les résultats renvoyés sont reçus. un autre site internet.

Dans le framework ThinkPHP, nous pouvons utiliser le code suivant pour générer la méthode JSONP :

$callback = isset($_GET['callback']) ? $_GET['callback'] : 'callback';
$data = array('name' => 'test', 'age' => 18);
echo $callback . '(' . json_encode($data) . ')';

Ici, nous vérifions d'abord si le paramètre de rappel existe dans le paramètre GET, et s'il existe, utilisons ce paramètre comme nom de fonction. Sérialisez ensuite les données à renvoyer au format JSON et ajoutez-les à la fonction de rappel. Enfin, lors du renvoi des données, nous renvoyons la fonction au navigateur avec les données.

Pour résumer, les problèmes inter-domaines sont généralement des problèmes très courants lors du développement. Mais nous pouvons résoudre ce problème grâce aux paramètres côté serveur. Dans le framework ThinkPHP, nous pouvons utiliser CORS ou JSONP pour résoudre des problèmes inter-domaines. J'espère que cet article pourra aider les lecteurs dans le besoin.

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!