Une brève analyse de la façon de configurer un proxy angulaire basé sur un échafaudage

Cet article vous présentera comment configurer le proxy angulaire (proxy) basé sur un échafaudage. J'espère qu'il vous sera utile !

Configuration du proxy angulaire

• Document du site officiel https://angular.io/guide/build#using-corporate-proxy

【Recommandation de tutoriel connexe : "Tutoriel angulaire"】

Pourquoi le faire ?

Écrivez un fichier proxy pour proxy faire correspondre les demandes à d'autres adresses afin de résoudre les problèmes inter-domaines dans le développement local.

Comment configurer ?

• Créez un proxy.config.js dans le répertoire racineproxy.config.js
• 可以在这个文件中做如下配置
• 在 package.json的运行项目命令中加入 --proxy-config proxy.config.js

配置介绍

const PROXY_CONFIG = [
  {
    context: ['/api'],
    target: 'http://xxx',
    secure: false,
    changeOrigin: true,
    pathRewrite: {
      '^/api': '',
    },
  },
];
module.exports = PROXY_CONFIG;

• context: 需要匹配的path
• target: 代理到的地址
• pathRewrite: 将请求的部分path重写，它是一个对象，键是^+要重写的path， 值是替换的path。
• secure: 安全设置
• changeOrigin: 改变源

配置实例

如http://localhost:4208/auth/login

想要代理到

http://www.baidu.com/news/login

可以这样配置

const PROXY_CONFIG = [
  {
    context: ['/auth/login'],
    target: 'http://www.baidu.com',
    pathRewrite: {
        '^/auth/login': '/news/login',
    },
  },
  
]

module.exports = PROXY_CONFIG;

Q： 如果有两个接口，一个/api/cer/register,另外一个/api/cer/login,我该如何将两个接口代理到不同的地址？

{
    context: ['/api/cer/login'],
    target: 'xxx1',
    secure: false,
    changeOrigin: true,
},
{
    context: ['/api'],
    target: 'xxx2',
    secure: false,
},

使用/api，只要是匹配到这个的都会走它的代理，不过如果在它前面加了个更加精确的/api/cer/login

Vous pouvez effectuer la configuration suivante dans ce fichier

Ajoutez --proxy à la commande d'exécution du projet du package. json -config proxy.config.js

Introduction à la configuration

rrreee

context : Le chemin qui doit correspondre🎜🎜cible : L'adresse à transmettre par proxy 🎜🎜pathRewrite : réécrivez le chemin partiel demandé. C'est un objet. La clé est ^+le chemin à réécrire, et la valeur est. le chemin remplacé. 🎜🎜secure : Paramètres de sécurité 🎜🎜changeOrigin : Changer la source 🎜🎜

🎜Configurer l'instance 🎜🎜🎜 comme http://localhost:4208/auth/login🎜🎜Si vous souhaitez utiliser un proxy vers 🎜🎜http://www.baidu.com/news/login🎜🎜 vous peut le configurer comme ça🎜rrreee

🎜Q : S'il y a deux interfaces, une /api/cer/register et l'autre /api /cer/login,Comment puis-je proxy deux interfaces vers des adresses différentes ? 🎜

rrreee🎜Utilisez /api, tant qu'il correspond à cela, il passera par son proxy, mais si vous ajoutez un /api/cer/login plus précis devant de celui-ci , il sera mis en correspondance en premier et ce proxy sera utilisé. 🎜🎜🎜D'autres utilisations sont mises à jour sur github : 🎜🎜https://github.com/deepthan/blog-angular🎜🎜🎜Pour plus de connaissances liées à la programmation, veuillez visiter : 🎜Introduction à la programmation🎜 ! ! 🎜

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!