Comment réaliser un cross-domaine entre ThinkPHP et Vue

Dans le développement Web moderne, la séparation front-end et back-end est un modèle de développement de plus en plus courant. Étant donné que le front-end utilise le framework Vue et que le back-end est construit à l'aide du framework ThinkPHP, les problèmes inter-domaines sont inévitables. Cet article expliquera comment réaliser un cross-domaine entre ThinkPHP et Vue.

1. Problèmes inter-domaines dans Vue

Vue est un framework JavaScript moderne pour créer des interfaces utilisateur. Étant donné que Vue est une application monopage, le navigateur n'a besoin de traverser le domaine que lors de la récupération des données sur le serveur où se trouve le composant Vue. Lorsque nous envoyons une requête Ajax à l'aide de Vue, le navigateur vérifiera si la requête provient du même domaine. Dans le cas contraire, une requête inter-domaines est effectuée.

2. Problèmes inter-domaines dans ThinkPHP

ThinkPHP est un puissant framework PHP open source, largement utilisé dans le développement Web. Dans ThinkPHP, les requêtes inter-domaines sont interdites par défaut. Si vous souhaitez implémenter plusieurs domaines dans ThinkPHP, vous devez effectuer une configuration.

3. Résoudre les problèmes inter-domaines

Dans Vue, nous pouvons résoudre les problèmes inter-domaines en définissant les en-têtes de la bibliothèque axios, comme indiqué ci-dessous :

import axios from 'axios'
axios.defaults.baseURL = 'http://example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/json';

Dans ThinkPHP, nous pouvons ajouter le code suivant dans le contrôleur :

header('Access-Control-Allow-Origin: * ');
header('Access-Control-Allow-Methods: GET,POST,PUT,DELETE');
header('Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept');

Le code ci-dessus ajoutera les informations d'en-tête correspondantes pour autoriser toutes les requêtes inter-domaines.

Nous pouvons également avoir un contrôle plus granulaire, par exemple :

header('Access-Control-Allow-Origin: http://example.com');
header('Access-Control-Allow-Methods: GET,POST,PUT,DELETE');
header('Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept');

Ce code permettra les requêtes inter-domaines depuis http://example.com.

4. Le proxy inverse Nginx résout les problèmes inter-domaines

Si vous devez utiliser Nginx comme proxy inverse entre Vue et ThinkPHP, vous pouvez utiliser le fichier de configuration suivant :

location / {
        proxy_pass http://backend/;
        add_header 'Access-Control-Allow-Origin' '*' always;
        add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS' always;
        add_header 'Access-Control-Allow-Headers' 'Origin, X-Requested-With, Content-Type, Accept' always;
    }

La configuration ci-dessus permettra à Vue d'envoyer des messages croisés. demandes de domaine. Parmi eux, « Access-Control-Allow-Origin » autorise les requêtes provenant de tous les domaines. Si nous souhaitons un contrôle de sécurité plus poussé, nous pouvons le modifier pour autoriser les requêtes provenant de domaines spécifiques.

5. Résumé

Grâce à l'analyse et à la solution des problèmes inter-domaines dans Vue et ThinkPHP, nous pouvons constater que les problèmes inter-domaines ne sont pas des problèmes insolubles. Pendant le développement, nous pouvons utiliser de manière flexible des solutions inter-domaines communes, et nous pouvons également effectuer un contrôle plus détaillé en fonction des besoins réels. Si vous rencontrez des problèmes inter-domaines lors du développement, vous souhaiterez peut-être vous référer à cet article, j'espère qu'il vous sera utile.

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!