Comment implémenter le cross-domain dans vue

Avec le développement continu de la technologie front-end, les ingénieurs front-end ont souvent besoin d'obtenir des données via des requêtes Ajax lors de la création de sites Web. Dans ce processus, il est facile de rencontrer des problèmes inter-domaines. Cet article présentera comment Vue.js implémente les requêtes inter-domaines.

1. JSONP cross-domain

JSONP (JSON with Padding) est une solution d'interaction de données entre domaines. Il est implémenté en utilisant le principe selon lequel la page peut charger des scripts intersites.

Pour implémenter des requêtes inter-domaines JSONP dans Vue.js, il existe généralement deux méthodes :

1) Créer manuellement des balises de script

Utiliser des bibliothèques HTTP telles que axios ou Vue-resource pour lancer des requêtes inter-domaines en créant manuellement un script les balises demandent.

import jsonp from 'jsonp';

jsonp(url, null, (err, data) => {
  if (err) {
    console.error(err.message);
  } else {
    console.log(data);
  }
});

2) Utilisez le plug-in Vue.js jsonp

Vue.js fournit un plug-in appelé jsonp, que nous pouvons utiliser pour implémenter des requêtes inter-domaines JSONP.

import Vue from 'vue';
import VueJsonp from 'vue-jsonp';

Vue.use(VueJsonp);

Vue.jsonp(url).then(response => {
  console.log(response);
}).catch(error => {
  console.error(error.message);
});

2. CORS cross-domain

CORS (Cross-Origin Resource Sharing) est une solution de partage de ressources inter-domaines qui permet au serveur du site Web d'autoriser l'accès inter-domaines au navigateur, évitant ainsi certains problèmes de sécurité du JSONP méthode .

L'utilisation de requêtes inter-domaines CORS dans Vue.js nécessite des paramètres pertinents côté serveur. La méthode d'implémentation spécifique est la suivante :

1) Ajoutez le champ Access-Control-Allow-Origin dans l'en-tête de réponse

Ajoutez le champ Access-Control-Allow-Origin dans l'en-tête de réponse renvoyé par le serveur pour autoriser le front- demandes de fin de page provenant de noms de domaine spécifiques.

const express = require('express');
const app = express();

app.get('/api/data', (req, res) => {
  res.setHeader('Access-Control-Allow-Origin', 'http://localhost:8080');
  res.json(data);
});

2) Envoyez une requête dans Vue.js

Envoyez une requête inter-domaines via la bibliothèque Axios dans Vue.js, définissez simplement withCredentials sur true.

axios.get('http://api.example.com/data', {
  withCredentials: true
}).then(response => {
  console.log(response.data);
}).catch(error => {
  console.error(error.message);
});

Résumé

Ci-dessus sont les deux façons d'implémenter des requêtes inter-domaines dans Vue.js, JSONP et CORS. Dans le développement réel, nous pouvons adopter différentes méthodes en fonction de circonstances spécifiques. S'il est très sécurisé et ne nécessite pas de configuration de serveur supplémentaire, nous pouvons utiliser la solution interdomaine JSONP ; si une sécurité plus élevée et une plus grande flexibilité sont requises, nous pouvons utiliser la solution interdomaine CORS.

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!