Comment configurer le proxy d'interface à l'aide de vue-cli

Cet article présente principalement la configuration du proxy de l'interface vue-cli. L'éditeur pense que c'est plutôt bon. Maintenant, je vais le partager avec vous et le donner comme référence. Suivons l'éditeur et jetons un coup d'œil.

Cet article présente la configuration du proxy de l'interface vue-cli et le partage avec tout le monde. Les détails sont les suivants :

Certains étudiants ont des questions lors de la configuration du. proxy d'interface. Je l'ai configuré Pourquoi l'interface est-elle toujours bloquée après le succès ? En fait, le proxy a réussi mais les règles d'adresse d'accès à l'interface ne sont pas claires

Ce qui suit utilise les tests locaux comme châtaigne pour vous présenter.

Certaines opérations de base ne seront pas présentées ici

Trouvez index.js dans le dossier de configuration vue-cli. C'est le fichier qui configure les règles d'interface. Créez proxyConfig.js dans le même répertoire. . Certains étudiants ont l'habitude de modifier directement le fichier original C'est également possible, mais il est recommandé d'utiliser un nouveau fichier :

module.exports = {
  proxyList: {
    '/api': {
      target: 'http://localhost:3000',  （这里是代理接口的位置）
      changeOrigin: true,（允许跨域，如果这不写，调用接口接口时会有跨域错误说缺少请求头）
      pathRewrite: {'^/api': '' } （路由规则下面详细介绍）
    }
  }
}

******Règles de routage******. *

Une fois le code ci-dessus exécuté, cela signifie que tant que vous voyez '/api' dans l'interface, il deviendra automatiquement l'adresse que nous avons définie, nous pourrons alors standardiser la norme d'écriture de l'interface lors de la configuration. Nous utilisons cet attribut pathRewrite. Path rewrite {'^/api': '' } fait référence à ce à quoi vous voulez que la route ressemble. S'il est vide, alors pendant l'analyse, si notre interface écrit $http.get('/api. /good'), alors nous verrons l'accès à /good côté serveur S'il n'y a pas de route correspondante côté serveur à ce moment, le service client Une erreur sera affichée sur le client. Le numéro de port est toujours le. numéro de port du client, tant d'étudiants ont l'illusion que cela ne fonctionne pas. De même, si nous définissons {'^/api': '/api' }, alors nous verrons /api sur l'accès à l'interface /goods. signifie que /api est non seulement automatiquement résolu en adresse proxy, mais également affiché sous forme d'itinéraire côté serveur.

Faites également attention au délimiteur / lors de la définition des règles de routage. Certains étudiants aiment écrire la cible comme ceci : 'http://localhost:3000/' Si vous ajoutez un délimiteur après le port, vous le ferez. constatez que le routage n'est pas correct. À ce stade, vous devez ajouter « / » lors du nom des règles de routage et également ajouter « / » pour l'interface, sinon vous constaterez qu'il y a un séparateur supplémentaire lors de la demande d'interface. tel que : '/api//goods'.

Après la configuration, introduisez proxyConfig.js dans index.js, définissez proxyTable pour terminer le réglage

const proxyConfig = require('./proxyConfig')
module.exports = {
  dev: {
    env: require('./dev.env'),
    host: 'localhost',
    port: 8188,
    autoOpenBrowser: true,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: proxyConfig.proxyList,
    cssSourceMap: false,
  }
 }

Écrivez comme ceci lors de la demande

axios.get('/api/goods').then((res)=>{console.log(res.data);}}).catch((err)=>{console.log(err);}})

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

Articles associés :

À propos de l'implémentation du mécanisme de répartition entre les composants parents et enfants de Vue2.0 (tutoriel détaillé)

Comment utiliser réagir-router Utiliser l'historique pour contrôler le routage (tutoriel détaillé)

Comment utiliser jqprint pour imprimer le contenu de la page

Utiliser js pour implémenter WeChat pour évoquez Alipay pour recevoir des enveloppes rouges (tutoriel détaillé)

Comment implémenter la modularisation de pages web statiques à l'aide de Gulp ?

Comment intégrer vux dans vue.js pour réaliser le chargement pull-up et l'actualisation déroulant

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!