Étant donné que le front-end et le back-end sont séparés, le proxy et la capture de paquets deviennent de plus en plus importants pour le front-end. L'environnement de développement transmettra les requêtes par proxy à l'environnement de test et à l'environnement de production. Voici les éléments de configuration et les châtaignes J'ai trié lors de la configuration de DevServer.proxy.
Fonctions de base : proxy, capture de paquets, domaine croisé, réécriture du chemin du proxy, modification des informations d'en-tête, proxy webSocket,
dev-server utilise le puissant package http-proxy-middleware. Consultez sa documentation pour une utilisation plus avancée.
fichier de configuration
Trouvez le fichier /config/index.js
Ajoutez la configuration suivante à l'option proxyTable pour configurer plusieurs proxys différents
proxyTable: {
'/dev': {
target: 'http://www.baidu.com:80',
changeOrigin: true, //true为开启跨域代理
pathRewrite: {
'^/dev': ''
}
}
},
Eh bien, voici la clé, frappez au tableau noir ! Par exemple, un http://localhost:8080/dev/getusernom de paramètre d'interface /devest mis en correspondance à partir du port, et la configuration /dev/getpeut également correspondre à cette interface, et si la cible est configurée, elle sera http://www.baidu.com:80/test/finalement transmise par proxy àhttp://localhost:8080/test/dev/getuser
option
cible
La chaîne d'url à analyser avec le module url
avant
La chaîne d'url à analyser avec le module url
agent
Objet à transmettre à http(s).request (voir les objets proxy https et proxy http du nœud)
SSL
L'objet à passer à https.createServer()
ws
true/false : si vous souhaitez utiliser des websockets proxy
xfwd
vrai/faux, ajouter un en-tête x-forward
sécurisé
vrai/faux si les certificats SSL doivent être vérifiés
versProxy
true/false, passez une URL absolue au chemin (pour les proxys proxy)
prependPath
true/false, par défaut : true - spécifie s'il faut ajouter le chemin cible au chemin proxy
ignorePath
true/false, par défaut : false - spécifie si vous souhaitez ignorer les chemins proxy pour les requêtes entrantes (remarque : vous devrez ajouter/manuellement si nécessaire).
adresse locale
Lier la chaîne d'interface locale pour les connexions sortantes
changerOrigine
true/false, par défaut : false - remplace le début de l'en-tête de l'hôte par l'URL cible
authentification
Authentification de base, c'est-à-dire 'user:password' pour compter l'en-tête d'autorisation.
hostRewrite
Réécrivez (301/302/307/308) le nom d'hôte de l'emplacement sur les redirections.
réécriture automatique
Réécrivez (301/302/307/308) l'hôte/port de l'emplacement redirigé en fonction de l'hôte/port demandé. Valeur par défaut : faux.
protocoleRéécrire
Réécrivez le protocole de localisation sur (301/302/307/308) en "http" ou "https". Valeur par défaut : nulle.
en-têtes
Objet, ajouter un en-tête de requête. (Exemple : {hôte : ' www.example.org '})
proxyTimeout
Timeout (en millisecondes) lorsque le proxy ne reçoit pas de réponse de la cible Voici son lien officiel : https://github.com/chimurai/http-proxy-middleware
contexte
Si vous souhaitez proxy plusieurs chemins spécifiques vers la même cible, vous pouvez utiliser un tableau d'un ou plusieurs objets avec une propriété context :
proxy: [{
context: ['/auth', '/api'],
target: 'http://localhost:3000',
}]
Notez que les requêtes à root ne sont pas proxy par défaut. Pour activer le proxy racine, devServer.index doit spécifier cette option comme fausse :
webpack.config.js
devServer: {
index: '', // specify to enable root proxying
host: '...',
contentBase: '...',
proxy: {
context: () => true,
target: 'http://localhost:1234'
}
}
contourne
Parfois, vous ne voulez pas tout proxy. Les proxys peuvent être contournés en fonction de la valeur de retour d'une fonction.
Dans cette fonction, vous pouvez accéder aux options de requête, de réponse et de proxy. Il doit renvoyer false ou le chemin sera fourni au lieu de continuer à envoyer la requête par proxy.
Par exemple, pour une demande de navigateur, vous souhaitez servir une page HTML, mais pour une demande d'API, un proxy est requis. Tu peux le faire:
proxy: {
'/api': {
target: 'http://localhost:3000',
bypass: function(req, res, proxyOptions) {
if (req.headers.accept.indexOf('html') !== -1) {
console.log('Skipping proxy for browser request.');
return '/index.html';
}
}
}
}
onProxyRes
Capturez le paquet et modifiez les informations d'en-tête avant d'envoyer la demande, et utilisez votre imagination pour d'autres opérations
onProxyRes: function(proxyRes, req, res) {
var cookies = proxyRes.headers['set-cookie'];
var cookieRegex = /Path=\/car-oss\//i;
//修改cookie Path
if (cookies) {
var newCookie = cookies.map(function(cookie) {
if (cookieRegex.test(cookie)) {
return cookie.replace(cookieRegex, 'Path=/');
}
return cookie;
});
//修改cookie path
delete proxyRes.headers['set-cookie'];
proxyRes.headers['set-cookie'] = newCookie;
}
}
cookieDomainRewrite
Remplace le domaine de l'en-tête set-cookie. Valeurs possibles : false (par défaut) : désactiver la réécriture des cookies String :
par exemple new cookieDomainRewrite : "new.domain". Pour supprimer un domaine, utilisez cookieDomainRewrite: "".
Objet : mapper des domaines à de nouveaux domaines, pour que "*" corresponde à tous les domaines. Par exemple, pour conserver un domaine inchangé, réécrivez-en un et supprimez les autres :
cookieDomainRewrite: {
"unchanged.domain": "unchanged.domain",
"old.domain": "new.domain",
"*": ""
}
Autre configuration personnelle
Parce que mon préfixe d'interface n'est pas uniforme, j'utilise process.env.NODE_ENVle config.js d'axios pour ajouter un préfixe de premier niveau à toutes les requêtes en mode développement.
Par exemple :
localhost:8080/test/get
localhost:8080/user/get
After configuration :
localhost:8080 /dev/test/get
localhost:8080/dev/user/get
baseURL: process.env.NODE_ENV === 'development' ? window.location.href.split('/#/')[0] + '/dev' : window.location.href.split('/#/')[0]
Cela me permet de gérer plus facilement toutes les interfaces et de les proxy en mode développement