Maison >interface Web >js tutoriel >Explication détaillée des étapes d'utilisation d'express+http-proxy-middleware sur tous les domaines

Explication détaillée des étapes d'utilisation d'express+http-proxy-middleware sur tous les domaines

php中世界最好的语言
php中世界最好的语言original
2018-06-01 09:47:533217parcourir

Cette fois, je vais vous donner une explication détaillée des étapes d'utilisation d'express+http-proxy-middleware sur plusieurs domaines sur le nœud. Quelles sont les précautions pour l'utilisation d'express+http-proxy-middleware sur plusieurs domaines. on node? Ce qui suit est un cas pratique, jetons un coup d'œil.

Pourquoi utiliser le transfert de proxy de nœud ?

Nous voulons parvenir à une séparation front-end et back-end, puis le front-end n'installe pas Tomcat sur son propre ordinateur. À ce stade, nous construisons un serveur avec nœud, puis transmettons. nos demandes. Par exemple : notre hôte local est localhost:3000, et nous devons visiter http://www.example.com (bien sûr, pendant le processus de développement, cela devrait être l'adresse de votre backend Tomcat) pour effectuer une interaction avec les données ajax.

Créer un projet

npm init

Installer le module

npm install express connect-timeout http-proxy-middleware --save-dev

Créer un fichier js

<!--proxy-server.js-->
const express = require('express');
const timeout = require('connect-timeout');
const proxy = require('http-proxy-middleware');
const app = express();
// 超时时间
const TIME_OUT = 30 * 1e3;
// 设置端口
app.set('port', '80');
// 设置超时 返回超时响应
app.use(timeout(TIME_OUT));
app.use((req, res, next) => {
 if (!req.timedout) next();
});
proxyOption = {
 target: 'http://localhost:8080',
 pathRewrite: {
    '^/api/' : '/' // 重写请求,api/解析为/
  },
  changeOrigoin:true
};
// 静态资源路径
app.use('/', express.static('src/page'));
// 反向代理
app.use('/api/*', proxy(proxyOption));
// 监听端口
app.listen(app.get('port'), () => {
 console.log(`server running @${app.get('port')}`);
});

Je crois que vous avez lu cet article Vous maîtrisez la méthode des cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment développer la fonction de zone de saisie du mot de passe du code de vérification dans l'applet WeChat

Comment utiliser webpack3.0Configurer webpack-dev-server

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn