Using HTTP proxy middleware to configure cross domain proxy in gulp server

brief introduction

HTTP proxy middleware is used to forward requests to other servers in the background, which is what we usually call cross domain requests. For example, when we are developing a project, we use gulp to build a local server with the address of, and use JSON server to create analog data with the address of http://localhost:3000/. When we use our local project to request data, because the port numbers are different, cross domain is involved. (when the project is developed and deployed online, the content of the deployment agent will also be involved.) We can configure agents in local services to complete cross domain requests.


It is not recommended to install the latest version during installation, which is prone to bug s.

npm install http-proxy-middleware --save-dev
#Or use yarn installation
yarn add http-proxy-middleware@0.20.0 -D


proxy([context,] config)

  • [context,], the first parameter refers to the request to be forwarded.
  • config. The second parameter is an object, which is some configuration items;
const proxy = require('http-proxy-middleware');
const apiProxy = proxy('/api', { target: '' });
// '/api',Request to be forwarded
// 'target',Refers to the target server
// 'apiProxy' Now it can be used as middleware in the server.

The first parameter [context,], value Description:

  • If omitted, it is equal to "/", which means matching any path and all requests will be forwarded / proxied;
  • "/ api", which means requests starting with "/ api", will be proxied;
  • ["/ api","/ajax","/someother"], indicating that multiple paths are matched, and these paths will be proxied;
  • '* *. html' matches any request ending in. html;
  • ['/ api / * *', '! * / bad. JSON'], matches any request under / api, but does not include * * / bad.json;

The content of the second parameter config object is as follows:

  • Target, target server;
  • Change origin, whether to change the original host header to the target URL, false by default;
  • ws, whether to proxy websockets;
  • Path rewrite, rewrite the path;
  • router: rewrites the target server of the specified request. Note that when matching, the first matching result will be returned, so the order of configuration is very important;
const proxy = require (' http-proxy-middleware ') ;     

const config = {
	target: '', // Target server
	changeOrigin: true, // Whether to change the original host header to the target URL, false by default
	ws: true, // Proxy websockets or not
	pathRewrite: {
		'^/api/old-path': '/api/new-path', // Rewrite the path and replace / API / old path with / API / new path
		'^/api/remove/path': '/path' // Rewrite the path and replace / api/remove/path with / path
	router: {
		// If request host = = 'dev.localhost:3000',
        // Rewrite the target server '' to 'http://localhost:8000'
		'dev.localhost:3000': 'http://localhost:8000'


The middleware attribute of gulp web server is used to connect middleware functions or middleware function lists, that is, to configure agents. Click to view Use gulp to build the local server.

The contents of the gulpfile.js file are as follows:

const {src} = require("gulp");
const gulpServer = require("gulp-webserver");
const proxy = require("http-proxy-middleware");

function startServer() {
    return src("./dev/")
            port: 8008,
            host: "",
            livereload: true,
            open: true,
                    changeOrigin:true,//Cross domain
exports.default = series(startServer);
111 original articles published, 41 praised, 20000 visitors+
Private letter follow

Tags: JSON npm Attribute Web Server

Posted on Sat, 14 Mar 2020 06:58:41 -0400 by phillips321